Reading Assignment: Accessibility and HTML

[TurtleFoot]

1.What is accessibility?

Accessibility is the practice of making your websites usable by as many people as possible.

2.How do people interpret websites without vision?

People without vision will have to use special software called Screen Readers that can read digital text aloud.

3.How does semantic HTML help make websites accessible?
Semantic HTML makes websites more accessible by using simple elements for the UI to better understand for keyboard only users or provide better context for screen reader only users.

4.Name a few practices to avoid when writing HTML.

Avoid < divs > when creating headers and footers and use semantic elements instead. Also avoid using < i > and < b > to change text on a webpage because they have no semantic elements for a Screen reader to properly go over.

5.What is a tab index?

A tab index is an attribute that indicates the tab order of any HTML element.

[mcgrane5]

wow really great awnser man. your have put a lot of time and effor into this. i commend you. keep up the grea work and presistance u will do well

[Saint_77]

1. Accessibility is when you make your website accessible as all people. Visually impaired, hearing impaired etc. so that everyone can use your website
2. They use special browsers that interpret the code and it “Reads” the website to them
3. It helps distinguish which portions are which making it easier to assign importance
4. Avoid using unclear language, html tables, dashes, abreviations
5. allows you to specify the TAB order. Items will be highlighted/tabbed to, in the order you specified instead of the default tab order of the site

[RedK78]

1. Accessibility is properly using semantic elements in html in order to make your content easily accessible to the greatest number of people.

2. They use screen readers.

3. They give proper structure to a webpage this makes it easier for search engines and screen readers to more easily identify information that is relevant to the user.

4. It is good to avoid acronyms, abbreviations, dashes and other unclear language. Avoid using only div and span elements, prioritise semantic elements where possible.

5. The tab index attribute specifies the tab order of an element.

[dyildiz]

1. Accessibility is the practice of making your websites usable by as many people as possible.

2. Many people with visual impairments use screen magnifiers that are either physical magnifiers or software zoom capabilities. Most browsers and operating systems these days have zoom capabilities. Some users will rely on screen readers, which is software that reads digital text aloud.

3. Because it’s easier to develop with, better on mobile and good for SEO.

• Don’t use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.
• Expand abbreviations — instead of writing Jan, write January.
• Expand acronyms, at least once or twice, then use the tag to describe them.

5. Basically, the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order.

[Devo]

1. What is accessibility?
The fact of being able to be reached or obtained easily.
When it comes to HTML, using its elements for the correct purpose at all times or as much as possible.

2. How do people interpret websites without vision?
Using a screen reader.

3. How does semantic HTML help make websites accessible?
Being easier to develop with (better functionality and easier to understand), being lighter in size and easier to make responsive (running better on mobile).

4. Name a few practices to avoid when writing HTML.

• Using dashes when they can be avoided.
• Using abbreviations.
• Using acronyms since the first mention.

5. What is a tab index?
It’s a global attribute (attributes common to all HTML elements, which can be used on all HTML elements though they may have no effect on some elements) which indicates that its element can be focused, and where it participates in sequential keyword navigation.

[Devo]

Just finished my HTML section of the course! YAY!

I’ve checked countless times my code and after every few checks I spotted a new character bug but I cannot find anymore.
None of my tabs are displayed on Brave or Microsoft Edge. Would it be different for Chrome?

The photograph is not displayed on the browser either but I might have done something wrong on the storage end although I can not find where.
I’ll check that later.

Could anybody run my code on their computers or have a look at it so I understand whether it is the code not being right or the software or hardware I am using?

Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First HTML Page
    </title>
</head>
<body>
    <h1>Hello, Moralis!</h1>
    <p>     
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. 
        Aliquam, iste? 
        Unde esse asperiores amet omnis.
    </p>
    <p>
        Visit Moralis.io and start buidling!
    </p>
    <h2>Part 1: Example</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Officiis ratione facilis iusto deserunt!</p>
    <h3>Chapter 1: Metamask Login</h3>
    <img src="./Assets/metamask_login.png" 
         alt="metamask_login.png">
    <h3>Chapter 2: Loading NFTs</h2>
    <h4>Section 2.1: BigBoy Pants</h4>
    <h4>Section 2.2: Pumpkins</h4>
    <h2>Part 2: Building a DEX</h2>
    <ol>
        <li>Bitcoin</li>
        <li>Ethereum</li>
        <li>Tether</li>
    </ol>
    <ul>
        <li>Bitcoin</li>
        <li>Ethereum</li>
        <li>Tether</li>
    </ul>

    <form action="#" method="GET">
        <label> 
            Coin:
            <input type="text" name="coinName" placeholder="Coin" required />
        </label>
        <label>
            Amount:
            <input type="number" min="0" name="coinQuantity" placeholder="Amount" required />
        </label>
        <input type="password" name="password" placeholder="Password" />
        <button type="submit">Buy</button>
    </form>

    <p>This is an update.</p>

</body>
</html>

[teddyrockwell]

1. Accessibility is ensuring that websites are functional and usable by as many people as possible.
2. They might use screen readers or other assistive aids.
3. Semantic HTML helps with structuring how content is presented to screen readers and the people use the assistive aids.
4. Avoid use of abbreviations, dashes, images without accurate descriptions, improper elements, etc.
5. The tabindex attribute specifies the tab order of tab buttons for navigation.

[AdamK]

1. Being able to make your website accessible to as many people as possible
2. Voiceovers, Screen readers.
3. It makes it easier to read.
4. Dashes, Expanded Abbreviations, Expanded Acronyms.
5. Using the tab key to highlight certain elements

[Noxarn]

1. What is accessibility?
   Making the code understandable for everyone.

2. How do people interpret websites without vision?
   Screen readers

3. How does semantic HTML help make websites accessible?
   Easier to read for everyone, I think it also improves the SEO.

4. Name a few practices to avoid when writing HTML.
   Don’t write 5-7. Try to not use abbreviations. Write semantic.

5. What is a tab index?
   A way to navigate through website with the Tab button.

[Devo]

@thecil Can you please check my code to see if there’s any errors which explain by the taps are not displayed on my browser?

[thecil]

Not sure why is not working for you, I have just copy/paste your code, create the Assets folder and save the metamask image has metamask_login.png.

Then i run the live server from visual studio and it shows me your website.

Carlos Z

[Noahlangford]

1. What is accessibility?
   Accessibility is the practice of making your websites usable by as many people as possible.

2. How do people interpret websites without vision?
   Through screen read technology.

3. How does semantic HTML help make websites accessible?
   It provides a clear and easy path for the reader to interpret for the user

4. Name a few practices to avoid when writing HTML.
   Dont use abreviations, dashes or acronyms. using Don’t use HTML tables to create page layouts

5. What is a tab index?

6. You need tab index to set up or prioritize tabbed buttons

[jdiggs1026]

1. What is accessibility?

Descriptive text and design elements to enable alternation navigation and screen reader access.

2. How do people interpret websites without vision?

Using a screen reader

3. How does semantic HTML help make websites accessible?

It lays out the description of the sections and the text provides overall context.

4. Name a few practices to avoid when writing HTML.

Avoid Table, formation buttons in div’s use the button functionality

5. What is a tab index?

Tab index is an attribute with a value greater than zero that orders focus via the tab key

[Padma-Suta]

1. What is accessibility?
a.) Accessibility in regard to HTML is easily summarised as “POSH”, Plain Old Semantic HTML.
That means using tags meant for a particular purpose with certain default functions and readability (referring to computer/web readability).

2. How do people interpret websites without vision?
Use a screen-reader

3. How does semantic HTML help make websites accessible?

1. Easier to develop with - they are particular elements which can be easier manipulated with CSS or JS, plus it’s easier to understand and read (semantics contain extra default functions)
2. Better on mobile - smaller data size
3. Good for SEO - search engines give more importance to semantics and orients first around those keywords

Bonus: Semantics give rise of the context without knowing what it is. Non-semantics don’t. They could be anything.

4. Name a few practices to avoid when writing HTML.

• Don’t use vague or unclean language (no abbreviations or dashes if possible)
• Avoid the non-semantic route
• Avoid unclean code structure
• Avoid making yourself extra work (using non-semantics and having to manipulate them)
• Don’t use HTML tables to create page layouts

5. What is a tab index?
Mainly used for allowing non-tabbable elements to be tabbable. Makes them accessible via keyboard excess. There is another tab index function allowing some JS manipulation. But that’s a waste of time if one just uses the right tag in the first place…

[J_R]

1: Accessibility is to make a web page usable for the most amount of people.
Regardless of there skills or hardware limits.
Also help for those with disibilities .

2: A great website is programed with thought about those that have a disability.
They will likly use magnifyers, text to speech.
And so on.

3: If we make a site with bad semantics.
It can likely disturb a text to speech tool .
And the end user will RAGE! and smash hes keybord 💁

4: A good rule is to try not use dashes .
5-7 is better to wright 5 to 7.
Try not to use abbreviations.
Ekspand acronyms, at least once or twice, tag to describe them.

5 : It is a function to navigte and focus on elements, on the webpage with just the keybord.
This is of good use when the mouse has left you .

[BalancedBaldy]

1. Accessibility is the practice of making websites usable by as many people regardless of whatever their abilities or circumstances are.
2. People without vision interpret by using physical magnifiers, software zoom capabilities, or screen readers, a software that reads digital aloud.
3. Semantic HTML helps make websites more accessible because they are better structured and organized providing a clear and easy path that makes it easier for readers and good for SEO.
4. A few practices to avoid when writing HTML would be, not using abbreviations, dashes. or acronyms, try to refrain from using non-semantic routes, do not use unclean code structure, and do not use HTML tables to create page layouts.
5. A tab index is an attribute that specifies the tab order in a positive numerical order, instead of just in the default source order.

[fusemon]

1. What is accessibility?
   Making your creation as usable by as many peple or robots as possible.

2. How do people interpret websites without vision?
   By navigating via Audio Cues or Text-to-Speech Aids

3. How does semantic HTML help make websites accessible?
   Keeps everything organized in its proper structure and facilitates navigation. For search engines it improves SEO.

4. Name a few practices to avoid when writing HTML.
   Using

   for everything
   Using bad syntax

5. What is a tab index?
   A way to give a specific order to the “tab” function that people can use with their keyboard to scroll through different elements (e.g. If you want buttons to have a different tabbable order than the default)

[ShreyPanda]

1. What is accessibility?
   Ensuring accessibility means that the website created is usable and available to everyone.

2. How do people interpret websites without vision?
   Via the use of screen readers, screen magnifiers and voice assistants.

3. How does semantic HTML help make websites accessible?
   It gives the website better order and allows for easier, clear navigation of the content.

4. Name a few practices to avoid when writing HTML.
   Avoid using dashes, rather expand abbreviations and acronyms

5. What is a tab index?
   The tabindex attribute specifies the tab order of an element (when the “tab” button is used for navigating).

[MrGunnar]

1. What is accessibility?

A: Accessibility is the means of the user navigating through the page, whether it be by built-in keyboard shortcuts using “tab + enter/return” or by page speed where bad code or confusing language or structure may be the reason for a slow load process of the page. The use of semantic elements in your markup is imperative in order to have the best outcome possible when building your page due to these elements being recognized more so than

's.

2. How do people interpret websites without vision?

A: Via ScreenReaders.

3. How does semantic HTML help make websites accessible?

A: Semantic HTML helps the accessibility of the website through the ‘order’ it produces for the content layout, making it clear and easy to navigate through. It is also beneficial for SEO increasing responsivity to well structured code, and the use of elements for their original intended purpose, rather than

's. It makes it easier for mobile devices to load pages faster when there is better code written on the backend, and using semantic HTML is easier to develop with being easier to understand, as well as it auto-filling whenever you use a semantic element, which in turn saves you time.

4. Name a few practices to avoid when writing HTML.

A:

• Using
  's and bad code
• Not using semantic elements
• Properly spacing the page how you want it to be read so it’s not confusing for the screenreader.
• Abbreviations and confusing language.
• Data table layouts.
• Don’t use hyphens to separate numbers, write to instead. e.g - 5-7, write 5 to 7 instead.
• Expand acronyms

5. What is a tab index?

A: A tab index gives the ability to allow tabbable elements to have a custom tab order (specified in positive numerical order) instead of being navigated through on their default source code order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for tabindex :

tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex . tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g., via JavaScript, or as the target of links.