Accessibility—Developing Locally

Enhancing A Web Experience To Be More Accessible

Explorer Blog

In this project, you’ll apply your knowledge of semantic, accessible markup to refactor an existing website using the Codecademy best practices you’ve learned in this module.

To complete this project, you will need a screen reader installed on your computer or web browser. Additionally, you are encouraged to work with the other engineers in your onboarding cohort (via Slack) to compare notes and code during the refactoring process.

Getting Started

Ready to start? Great. Let’s get going.

To begin, start by downloading the files and assets associated with this website refactor. Once you have the files downloaded, load them up in the text editor of your choice.

Next, you will want to make sure you have installed or downloaded a screen reader. You will need this tool to complete the project properly.

Lastly, load the current index.html file up into the browser of your choice. Note: if you are using a browser-based screen reader, you will need to use that browser and not another.

Understanding the Problem

Using your screen reader, scan the web site from top to bottom.

Are you able to move from the top of the page to the bottom of the page without getting lost?

Does the site give you a sense of where you are on the page as you tab through the sections?

When you land on an image, do you understand what the image depicts?

What about icons or illustrations on the page?

Scroll through the different sections of the website, asides, headers, etc.

Do you get a sense of how these elements are related or their relative importance in the page architecture?

Implement these User Stories

1. As a user, my screen reader should be able to parse the web site’s navigation so that I know how to move from one page to the next.

Note: Navigational items that move users from one page to the next should be contained inside of a <nav> tag. Additionally, you should add the appropriate aria-role and aria-label where necessary.

2. As a user, my screen reader should be able to note what is the main content of the page, the site-wide header and site-wide footer of the page so that the user knows where they are on the page.

Note: Keep in mind that structural elements such as site-wide navigations or a site-wide footer are not unique to a given page thus should not be contained inside of the <main> element. Moreover, each structural element such as a <header>, <footer> or <main> tag should be assigned an appropriate aria-role.

3. As a user, my screen reader should be able to note what is the main
content on the page so that I know where the content starts and ends.

Note: Remember you can have more than one <article> element on a page.

4. As a user, my screen reader should be able to define the structural elements of the article so that I know what is a complementary element, a footer element, a section element and a self-contained article element inside of the parent
.

Note: Remember a <section> tag can be used inside of an <article> tag as long as it is defining a self-contained region. Additionally, you can nest <article> elements inside of an <article> element as long as the nested elements can be used for syndication outside of the web site. Lastly, elements such as <header>s and <footer>s can be nested inside of other elements.

5. As a user, my screen reader should be able to describe the article’s header element so that I know where the article starts.
6. As a user, my screen reader should be able to describe the article’s footer element so that I know where the article ends.
7. As a user, my screen reader should be able to tell me what the social share actions are so that I know what button to press to share the article.

Note: Remember that if a set of content does not have a clear heading tag, you can use the aria-label attribute on the content’s parent container to define the content group.

8. As a user, my screen reader should be able to define each section of my page with an aria-label, so that I know what information is contained within.

Note: There are two types of aria labels that can be used. The first, aria-label should be used when there is not a header element to define the area. If a header element is present and can be used to define a region of the website, you should use the aria-labeled attribute.

9. As a user, my screen reader should be able to clearly describe each image element so that I know what the picture is depicting.

Note: Remember that the alt attribute used to describe images should be short, descriptive, and should not contain the words “image of” or “graphic of.”

Testing the Changes

Now that we have updated the website to conform to modern web standards, let’s rescan this site using a screen reader. It’s important to notice the differences.

Are you able to move from the top of the page to the bottom of the page without getting lost?

Does the site give you a sense of where you are on the page as you tab through the sections?

When you land on an image, do you understand what the image depicts? What about icons or illustrations on the page?

Scroll through the different sections of the website, asides, headers, etc. Do you get a sense of how these elements are related or their relative importance in the page architecture?

Closing Thoughts

After testing your accessible site, think about the following:

  • When updating a website to meet web accessibility standards, what parts are most challenging?
  • As you test your website with a screen reader, before and after making changes, what were the main differences?
  • Can you identify any areas of the website that could be clarified further?

Good work!