28 Nov 20 20:50 - dvicj/Horiseon-Accessibility GitHub Wiki

Back again.

So, I felt kinda stuck so I googled how to make webpages more accessible. I started reading an article on developer.mozilla.org which was pretty helpful in making me understand screen readers better. The article told me some things I already knew about (alt attributes for images, comments, tidy up code…). I did learn some new things though, some was applicable to this challenge and some wasn’t.

  1. Use more specific elements rather than <div>. I changed some of the <div> articles to <header>,<nav>, <article> and <footer>. We learned this in the module lesson, but it didn’t occur to me that it would make the webpage more “accessible” by letting the browser know what information was in the element. (By doing this, I had to change some of the CSS to match - see below).

  2. Make sure that the <a> elements have obvious design changes when they have been clicked/ when they’re hovered on. I know that this probably goes against the original design (the links were just white with no text decoration), but I figured if they were trying to go for an accessible website as possible that this would be an acceptable change. I changed the active link to grey and the hover to black, with an underline for hover. I left the a:link value the same as the original.

  3. Proximity of clickable links - using a larger margin is beneficial for people who have hand tremors/ issues with fine motor skills. I decided to change the padding on the navbar links from 25px to 45px. This, paired with the hover style makes the links very apparent.

I remembered reading something from the prework on W3 Schools about putting keywords in the <head> section to help with SEO. So, I’m going to find that article… Okay, I found it. I was using the <meta> tag in the head section, which makes sense because that’s used to give info to the browser. This is what I added: <meta name=“description” content=“Marketing Agency”>

<meta name="keywords" content="SEO, Social Media, Marketing, Online Reputation, Brand Awareness, Lead Generation">
<meta name="author" content="Devin Jones">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

I had a slight memory of the “viewport” thing as a way of making sure that the webpage looks good no matter what size screen it’s being viewed on. This will definitely help with accessibility, as anyone can see and use the website no matter what device they may be using. The keywords and content description will make the website easier to find on search engines. I chose the keywords I did because they were the main headings of the website and described what the website is about. The meta tag is also supported on all browsers.

CSS: As I was scrolling through the CSS, I noticed a lot of selectors that had the same values, so I consolidated some of them.

  1. benefit-lead, benefit-brand, benefit-cost became .benefits div - because all of these were in the div element and are subject to the .benefits class.

  2. benefit-lead h3, benefit-brand h3, benefit-cost h3 became .benefits h3 - because all of these values applied to the h3 headings subject to the .benefits class. Also, as this was listed after .benefits div, these would take precedence.

  3. benefit-lead img, benefit-brand img, benefit-cost img became .benefits img - because all of these were in the img element and are subject to the .benefits class.

  4. search-engine-optimization, online-reputation-management, social-media-marketing became simply .content, because the parent article already had the content class specified, and there were no specific styles for the <h2> or <p> so I figured it could be applied across the board. I was still nervous so I copied and pasted all of the classes I was going to delete just incase. Update - looks the same!

  5. search-engine-optimization img, online-reputation-management img, social-media-marketing img became .content img - because all of these were in the img element and are subject to the .content class.

  6. search-engine-optimization h2, online-reputation-management h2, social-media-marketing h2 became .content h2 - because all of these were in the <h2> element and are subject to the .content class. I was wrong about there not being any specific styles for the <h2> element - I didn’t notice because this class was farther down which is why it didn’t matter when I applied that style to the entire .content class.

By doing this, I was able to delete all of the unused and old “class” identifiers on the HTML which tidied it up a lot. While this may not have been apparent to users visiting the website, I believe it will make the code more accessible and easy to understand for anyone who might work on the code in the future.

Issues: For some reason I accidentally put the image alt attributes in the “div” container of the image instead of the actual image? I’m not sure why I did that (for 2/3 images), so I fixed that.

⚠️ **GitHub.com Fallback** ⚠️