Form Validation- Flexibility and Accessibliltiy

Done: 1/18/2019

Teacher: Derek Featherstone

What I Already Knew: 

• It’s important for error messages to be clear and short and accessible to everyone
• HTML5 includes special text boxes for tel, url, email, date, search and more.
• Flexible designs are made to fit all types of resolutions

 

What I Didn’t Know:

• In the early days screen resolution was thought to be 640×480, and was later to be 800×600
• Fixed layouts don’t respond well to text-resizing, which is vital to users with disabilities
• aria-describedby makes sure that screen readers can hear if there is an error in the form

 

What I Want to Know:

I want to know more about how I can use HTML5 to make forms more accessible to those who need it.

 

Images and Multimedia Accessibility-Form Accessibility

Teacher: Derek Featherstone

Date: 1/16/19, uploaded 1/11/18

 

What I Already Knew:

• Assistive technologies, like screen readers,  can read from the alt attribute in the page, but it must be used correctly
• Some media on a web page are not important towards the purpose of the website, are more decorative than informative
• Voice recognition only says what’s in the respective attribute, so it’s important to get the information right

What I Didn’t Know: 

• Using aria-label= “__” makes assistive technologies say the content out loud
• The mouse grid is a way of narrowing down what’s on a web page to click on the information, but it’s more difficult and not pleasing to the user
• You can hide useless information from assistive technologies by using alt=”” or aria-hidden=”true”

What I Want to Know:

I want to know more ways to have functioning images on a web page that does not take away from the entire purpose.

Accessibility and Touch Interfaces:

• Done: 1/14/18
• Author: Derek Featherstone

 

What I Already Knew:

• It’s important to keep things on the website in a sensible order
• Since different people have different disabilities, it’s important to have a switch to cover all the bases
• Working with gestures can help make your website more accessible

What I Didn’t Know:

• I didn’t realize that some people never touch the actual screen, so it’s important to actually remember that
• It’s possible to change the linear flow of content
• You can look at accessible websites and see their flow

What I Want to Know:

I want to learn more ways to make websites more accessible to people with different kinds of conditions.

Keyboard Interaction:

• Date: 1/11/18
• Teacher: Derek Featherstone

What I Already Knew:

• Most websites ensure that the keyboard is just as accessible as the mouse
• The order in which things are placed on a website is highly important
• There’s a way to overkill on keyboard functionality, some make it so every paragraph is tabbable, but that’s unnecessary

What I Didn’t Know:

• Attaching JavaScript to a div makes the tab key skip through important content
• There are three types of keyboard traps, that are detrimental to the user’s experience
• Documenting how the tab key will work and its functions can help prevent keyboard traps

What I Want to Know:

I want to know more about making the keyboard just as accessible as the mouse and the steps to make sure that every user has a good experience.

 

Accessibility for Web Design:

• Done: 1/8/2019, Vid Released 1/11/2018

• Teacher: Derek Featherstone

 

What I Already Knew:

• People can be sensitive towards lights and effects on websites
• Accessibility is the most important factor
• Movement can make the website seem more interesting when used properly

 

What I Didn’t Know:

• Parallax effects are when the surface of the page and the image behind are moving at different speeds
• The ratio for things like text and icons are 4.5 to 1, larger items can be 3 to 1
• There’s a Reduce Motion feature in iOS

 

What I Want To Learn:

I would like to learn more about how to incorporate color contrast and animations in a functioning website.

1. What was you previous experience with HTML & CSS?

I never actually used HTML and CSS before I entered Southwest Career and Tech. However, in my freshman year I had an Exploring Computer Science class where I started learning about all the components and techniques used. We had two projects, a website we worked on our own that could be any topic, and another website about a specific region which we worked with a group. This was where I was properly introduced to HTML and CSS.

2. What is the most important thing you learned?

The most important thing I learned would probably be the really simple tags, like utilizing different div classes for different parts of the website. The div class reallyhelped me be able to stylize my website however I wanted. The span element is also something that is a basic technique, but really just makes everything look much neater and pulled together.

3. What do you wish you had spent more time on a done differently?

I wish I spent more time on the layout of the website, and learning different techniques to make it even better. I had a lot of ideas for the website, how it would look, and what would be inside of it, but I didn’t hash it out the way I wanted to it. I would like to have spent more time researching different tags to make it look more modern than the way it turned out.

4. What part of the project did you find the most challenging and how did you overcome that challenge?

Managing my time well was the most challenging part of this project. There were times when I planned out how much I could get done in one period, but I didn’t think about some tags not working, or just something really weird happening which pushed me behind. To put it simply, I overcame that challenge by pulling some all nighters at my home. In the end, I was able to create a functioning website, and I’m happy I was able to succeed.

5. What was the most enjoyable part of the project?

The most enjoyable part was simply brainstorming what I wanted to include in my website. I had a lot of ideas on how I wanted the website to look and spent a lot of time sketching out the pages and how each page would adhere to the requirements (I have at least ten pages in my sketchbook dedicated to the layout). While some parts didn’t turn out the way I wanted to, brainstorming ideas and layouts were really fun.

6. What was the least enjoyable part of the project?

The least enjoyable part of this project was realizing I had not managed my time well and was forced to pull an all nighter. I also had a lot of issues with my layout and tags which caused me a lot of stress.

7. Describe your project and the process steps that you took.

My website is simply about me and the things that I like. At first, I sketched out ideas a few times and then started working on the tags and layout. I made a lot of different websites with different components. After I had a solid idea to work on, I then focused on smoothing out the edges as much as I can. After some bumps in my time management, I was able to turn it in and present on time.

8. How could the teacher change the project to make it better?

I don’t really think changing the project too much is needed, I know a lot of people were struggling with coming up with ideas since the topic was so broad. I think next time maybe have a slightly more specific topic while still allowing the students the same freedom. Overall, this project did succeed in helping me improve my skills in coding HTML and CSS.

what’s good

“If you’re good at something, never do it for free.”