Accessibility project: business site, collaboration with Anna Hansen #386
Conversation
…video, added autocomplete attribute in input
There was a problem hiding this comment.
Nice that you added an aria label for the video, giving users a description of the element. Is there a reason why you added a tabindex as well? The tabindex attribute is used for interactive elements, but since the video doesn’t have any controls or should be clickable in any other way, I don’t think you need a tabindex on that.
Your form elements has correct labeling and it looks like all contrasts check out as well. Good job!
There was a problem hiding this comment.
You hit all the requirements for this project with really great use of semantic HTML and inclusion of alt attribute and aria-labels. Your design also has good contrasts and seems like the elements are large enough sizes for easy interaction. It was also seamless to navigate with just the keyboard, and with screen reader.
It looks like you put some extra attention to detail in making the form more accessible. I thought it was especially clever to use the legend element as a "visually-hidden" class, and I will have to remember to steal this for my next form 😅
Hope my comments are useful to you. Keep up the great work 🙌
| <footer> | ||
| <div class="byline"> | ||
| <img src="media/whale.png" alt="Company logo: Blue wave scuba"> | ||
| <p>Video by: <a href="https://pixabay.com" target="_blank">Pixabay</a></p> |
There was a problem hiding this comment.
Something new I learned during this project is we're meant to avoid opening links in a new window, even though many companies prefer to keep users from navigating away from their site (I also prefer a new window as a user). So I believe best practice is to include an explanation that the link will open in a new tab. Here is an example (from silktide):
<a href="products.html" target="_blank"> Products (opens in new window) </a>
or for an image inside a link:
<a href="products.html" target="_blank"> <img src="products.jpg" alt="Products (opens in new window)"> </a>
| </div> | ||
| <form action="https://httpbin.org/anything" method="post"> | ||
| <fieldset> | ||
| <legend class="visually-hidden">Sign Up for Diving Class</legend> |
There was a problem hiding this comment.
Nice way to group related form controls and make the form more accessible for screen readers 😎
| <body> | ||
| <header> | ||
| <div class="hero"> | ||
| <video autoplay muted loop playsinline tabindex="0" aria-label="video showing two scubadivers in deep water"> |
There was a problem hiding this comment.
Nice work making the video more accessible with tabindex, aria-label, and track element 👏
| } | ||
|
|
||
| fieldset { | ||
| /* max-width: 70%; */ |
There was a problem hiding this comment.
Looks like this was commented out, so maybe you want to remove it ?
Collaboration with Anna2024WebDev
View it live
Deployed accessibility project: https://project-business-site-a11y--bluewavescuba.netlify.app/