Term 2 – Week 11

This week has been spent finding solutions to some of the remaining screen reader related issues, and revisiting previous tasks to rework some of the solutions.

A lot of time was spent trying to figure out the best way to structure the semantics of the components. The screen reader uses the accessibility tree and navigates through it in a linear fashion; because of this, proper semantics are vital to good accessibility.

One example is as follows:

<header className={styles.navbar}>


By using a header element who’s implicit role is “banner” the screen reader voices the navbar as a banner and not a navigation. The navbar element returns a group of Div elements, so the navbar get stuck with a banner role.

There are two better ways to handle the semantics in this particular case.

<Nav className={styles.navbar}>

<section className={styles.navbar} >
{navbar} – where navbar returns a <Nav /> element


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s