Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Peter Retvari
2,566 PointsWhy we had to change aria-labelledby="exampleModalLabel" to aria-labelledby="register form" ?
Why we had to change aria-labelledby="exampleModalLabel" to aria-labelledby="register form" ?
5 Answers
Alita Edmonds
6,068 PointsHi! It is more specific than just a random name. Bootstrap used aria-labelledby="exampleModalLabel" for its example. We changed it to aria-labelledby="register form" because it is not an example and we want to give it specific name. Hope this helps!
Jeff Sanders
Courses Plus Student 9,503 PointsHe misuses aria-labelledby and in fact pronounces it incorrectly as well. It's not "aria label led by" but rather "aria labelled by". This is extremely important in understanding how it works. The attribute is not intended to contain a text string of your choice. It's actually a pointer to a specified id in your HTML. For example, if I want a screen reader to inform a user that some content has the label "form" then I would apply the attribute aria-label with the value "form" to the element containing that content. However, if I want some content to be labelled by an h2 heading, for example, I'd apply an id to that heading (i.e. id = "form"). Then, I'd apply aria-labelledby = "form" to the content element to point to the h2#form as its label. A screen reader would then parse that and do its thing.
It appears in the video like Guil thinks "register form" will be read to a user as the actual label, which is not what would happen. A screen reader would attempt to find the two id attributes: "register" and "form". If found, it would let a user know that the modal is labelled by the text inside the elements that contain those id attributes. In our case, the screen reader would find the id with the value "register" but that id is attached to our modal. The screen reader would think that the modal is the label itself. That is incorrect and will only confuse the user. There is no id = "form" in our code so the screen reader would do nothing.
Zhen Wong
7,816 PointsAfter some research, this is what I get. Hope it helps you too.
Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities.
aria-labelledby: Identifies the element (or elements) that labels the current element.
To read more, here is the link: https://www.w3.org/WAI/PF/aria/states_and_properties#state_prop_def
Alita Edmonds
6,068 PointsYour welcome! To mark this question as answered, (just in case you didn't know this) click the best answer button!
Peter Retvari
2,566 PointsPeter Retvari
2,566 PointsMany thanks for your help :)