About Fenna

Fenna is a Creative Front-end Developer. She now works at Bakken & Baeck, which is a norwegian tech design studio. She used to work at Build in amsterdam.

She is going to explain to us a bit about accessibility in websites and how we can do this properly. To help us she has some tips and tricks that we can use in our projects.

Focus state for keyboard users:

A focus state for keyboard users is important for your website because a large number of people who use your website cannot handle the mouse properly. This can be due to several things such as:

• Motor impairment
• Handicap

By using a focus state you can clearly see where you are as you tab through the website. This way even people who cannot use a mouse can easily navigate through your website.

There are a number of ways to do this. For example, :focus and :focus-visible in css. It is best to use :focus-visible since this is a newer pseudo class that only shows a focus state when it is really needed.

Aria Attributes:

The next thing we should use is Aria Attributes. These are Accesible rich internet applications. There are a number of Attributes we can use for certain situations.

Aria Attributes should only be used whenever styling dictates the use of elements that arent used for the purpose they were designed for. For example using a list item as a button.

These are a few aria-attributes i can use that Fenna described:

Aria-label:

Aria-label is used to give a describing text to elements. This is mostly used in elements that lack a description or have the wrong description because it was used differently from its purpose.

Aria-Controls

The global aria-controls property identifies the element whose contents or presence are controlled by the element on which this attribute is set. In short it can be used to properly link a button created by for example javascript to the item it controls.

Aria-Expanded

Aria-Expanded is used for example to show if some menu is opened or closed. If a hamburger menu is opened, It should get aria-expanded: "true". And whenever it is closed it should get aria-expanded: "false". This for example is helpful for people using a screenreader since the screenreader can see if a menu is opened based on Aria-Expanded.

Aria-Live:

Aria-Live can be used to update the screenreader on a change. For example a popup. It can use Aria-Live to not interupt the current action on the screenreader instead of instantly interupting the screenreader when it appears. Or the other way around when you want something to interupt the screenreader.

Here are some modes of aria-live that can be used and an explaination on what they do.

Aria-Live=”off” : Screenreader doesn't get an update on change

Aria-Live=”polite” : Waits for the screenreader to finish before announcing the change

Aria-Live=”assertive” : Interupts the screenreader and immediately announced the change

Aria-Atomic

Aria-Atomic allows you to decide whether the screenreader reitterates over the entire group whenever something changes or just the element it is currently on. It can be set to true or false where true means it presents the entire region again on the screanreader.

Accessible Carousels:

If you've been building websites for a while you must have come across the carousel a few times. But only a very few times are the carousels you build truly accessible. If you want to build an accessible carousel there are a few things you have to keep in mind.

• The carousel needs to have role="region" or be a section. 
• The carousel needs an aria-roledescription="carousel".
• The carousel needs a aria-label(ledby).
• The carousel slide needs role="group".
• The carousel slide needs aria-roledescription="slide".
• The carousel slide needs aria-label.
• The carousel controls need role="group".
• The carousel controls need aria-label.
• The carousel Buttons need aria-label.
• If the buttons are disabled they need to have aria-disabled="true".

There are some other things that are necessary to building a good accesible carousel. For example:

Whenever a slide isn't visible in the website the wrapper needs to get aria-hidden="true". and the children that are visible need to have tabindex="-1". You shouldnt use li for the slides if at all possible because whenever the screenreader reads a list it will show you the amount of items at all times.

These things ofcourse aren't set in stone and are subject to change as the webdevelopment world develops.

Focus Guard

Whenever you use a modal in your website you should be aware of a few things.

If you have to use a modal you should use a <dialog>. This is a html tag that is designed to be used as a modal. Whenever the modal is opened the focus should immediately be on the close button. This way people can easily leave the modal without much confusion. You should also consider using the escape key to be able to close the modal.

Color contrast and font size

This part is very important on every website and is often done wrong. The color Contrast. You should check the color contrast on you website whenever you use colors. There should be a minimal ratio of 2.5:1 out of 21:1(black on white).

There are a few ways to check the color contrast on your site. First thing you can do is use the lighthouse audit in you inspector. This will show you the exact ratio you have and where it goes wrong. You can also just look in the internet and find a website that checks 2 colors for contrast.

You should also check the letter size of your website properly. This is also done wrong on many websites. The thing that is most often used in good fonts is this:

p {
max-width: 60ch;
}

The ch takes the width of the 0 in your font. So take this in mind. Whenever you use a custom font with a different letter 0 this can break you font size. The best font-size to use is around 50c to 75ch

Alt text op afbeeldingen

This is something that has been said to me more times than i can count but that just means it is that important. Use proper alt text on your images. Every image that isnt just for decoration should have an alt text.

Semantische Code

Using correct semantic code is also very important for accessibility. This can make the difference between a proper accesible website or a website that cant be used by people using a screenreader. For example you should use lists instead of endless div's where applicable.

Extra

There are some small extra things that are very important to your website but dont fit in a category. These are: 

The skip to content button

The skip to content button can help people that use a screenreader of tab through your page a lot. Make sure the text in the button also makes sense to the user.

Prefers-reduced-motion

Prefers-reduced-motion can be very important for your website. it should be used whenever you use a lot of animations or movements in your website. This css pseudo-class should be used to reduce animations to snap wherever applicable.

Autoplay

All autoplay carousels and videos should be able to be paused. especially when combined with prefers-reduced-motion.

Screenreader

At the end of the day it is always a good idea to get comfortable using a screenreader. This way you can simply test for accesibility in you website without having to ask another person to do it for you.

Reflection

Accesibility is a lot of work but it is very necessary in small bits. I liked the talk fenna gave a lot. She emphasized that even in company's that would lose budget by thinking about accesibility it is important to do so. I dont know if i could take away a lot from it since i dont believe it is necessary to go that deep into accessibility and lose budget because of it.

I do believe i will start to make a habit of making simple adjustments in my everyday code so that my code is more accesible without wasting much time. Like adding alt tags to all images for example. Its a simple thing that helps a lot.

For my selfimprovement

Whenever you open a menu there could be a button that asks you if you would like to have motion in you website.
and whenever there is a dialog or popup in your website you should have the escape key be configured to leave the modal.