Webutvikling

Accessibility

I encountered a few warnings when I submitted my website to a web accessibility evaluation tool, along with some contrast errors. I changed the text colour on several of my buttons to a much darker colour to increase contrast. I also changed the text-decoration property on my <a> tags to be underlined. I then changed the button text to give more information about where the hyperlinks lead to, giving them context when separated from the rest of the body of text. Furthermore, I restructured my headings so that no page skipped heading levels.

Finally, the biggest issue I had with my site was the inability to fully navigate via tab. Without going into specific detail about my own code, I managed to solve this problem with slight additions. Firstly, I included the property tabindex=0 to my anchor points. This allowed me to target the elements in the first level of my navigation bar, but since my nav bar made use of :hover elements and javascript, I still encountered problems. I managed to activate the dropdown menu on tab by using the pseudoclass :focus, but I still had a problem - I couldn't tab through my dropdown menu. After a bit of trial and error I managed to get it working with an additional pseudoclass - :focus-within. This finally allowed me to interact with the dropdown menu when the initial anchor point was focused; a tab-targetting equivalent to a mouseover :hover. The only problem with this fix is that it doesn't work in mobile mode. However, I expect that the amount of people accessing the website, while possible, with both a mobile device and a keyboard is negligible.

Below is a link to my website before it was fully adjusted for accessibility.