Building a Website (Portfolio)
2022-2023
As an Accessibility Consultant, I tried to ensure that this website would be as accessible as possible. Here I will present some measures I took to ensure it. Read my Accessibility Statement to know more about it.
Right from the start
The best way to implement accessibility measures is to think about it from the first moment.
I chose Wix as the platform for this website because, from all platforms I'd used before, I knew this would allow for the costumization of headings and alt text for images.
After choosing a template with a good color contrast between background and text, I had to diagnose and fix some other issues. In the end, these measures increased the website's SEO score from 62/100 to 73/100.
Headings
While the headings in the template looked visually evident and aesthetically pleasing, they weren't structured in a hierarchized way. Frequent checks and diagnosis allowed me to fix problems quickly.
Example: On the right, we see the structure of the homepage after I applied some changes on it. One of the headings (Subscribe Form) skips 2 levels. Another shouldn't be a heading at all, conceptually.
Solution: I set all the headings to be in an adequate level.
Alt text in all images
Blind users can see images if we code them with an apt description. Their screen reader will read it out loud, and no relevant information will be lost.
I made sure to write relevant alt text in all images in this website. On the left, we see an example, found in the portfolio case for the videogame Foolish Mortals.
Color Contrast
When deciding colors for backgrounds and fonts, I ran their color codes on a Color Contrast Checker to ensure that the final image had sufficient contrast according to the WCAG 2.1 Guideline 1.4.3 Contrast (Minimum). and 1.4.4. Contrast (Enhanced).
On the right, we can see an example from the the homepage. The color contrast checker shows it passes the minimum criteria.
Closed Captions
Adding closed captions to the video of my presentation at a conference was essential. Closed Captions are a level A (minimum) requirement for the Web Content Accessibiltiy Guidelines. All multimedia files with video and audio must be synchronized, precise, identify the speaker and include relevant sounds.
Writing the Closed Captions: the first step was transcribing the audio, in Portuguese, including speaker identification and sounds such as laughter and clapping.
Readability Standards: After, I broke the transcription in small sections. Each caption would have the number of characters and lines recommended by 3Play Media, W3C-WAI and other sources. Otherwise, captions that are too long or that last too little time may be overwhelming and hard to follow.
Translating into English: Since the whole website is in English, and English-speakers are one of my target demographics, I ensured there would subtitles for it. Thus, I translated the 17-minute video's captions into English. Sometimes, this meant I needed to break a caption into two.
In the meantime, I ensure that both languages would have captions:
-
Fully and precisely synchronized with audio.
-
Fully accurate;
-
Optimized for readability, following the recommended number of lines, characters per line and timespan.
Search Engine Optimization
I increased the SEO score by 11 points, out of 100, from 62 to 73.
Accessibility improves Search Engine Optimization (SEO), but it has also been a conscious decision. Up until the moment, it has been increased by:
Accessibility measures: Meaningful page titles; heading structures; alt text in all images.
Other measures: Writing meta descriptions for every page; making URLs SEO-friendly; ensuring that page titles have an optimized length; running pages through an SEO checker.
Some choice in priorities and some limitations with the platform didn't allow me to currently optimize the SEO to its fuller potential yet. Currently, the homepage's SEO score is 73, according to SEO site checkup.
