Blog

Your users have various visual abilities. Someone who is color-blind might not be able to differentiate between colors or might have difficulty working with colors that are similar to one another. Other users might use zoom to enlarge content. Accommodating various visual abilities is an important part of accessibility.

Contrast

Ensuring adequate contrast makes it easier for everyone to read text content, interpret graphical elements, identify UI components, and notice when those components change state. People with low vision often have difficulty reading text, identifying buttons that don’t contrast with the background, or determining the state of UI components. The problems can be exacerbated if a person has a color deficiency that lowers the perceived contrast even further.

Fortunately, contrast ratios can be checked programmatically. You can use the FastPass tool in Accessibility Insights for Web to perform contrast checking.

microsoft windows server certification training courses malaysia

One of the most important ways that users interact with web applications is by using forms to submit information. There are several important considerations in how you write your forms to make sure all of your users can move through, fill in, and submit them.

The fundamental concept is to use HTML the way it was designed. Standard HTML form elements are built for accessibility, but it’s easy to unconsciously override accessibility features with the latest JavaScript library or overly clever CSS.

Labels

Every input tag on your forms should have an associated <label> tag to identify it. This tag is different from just putting some text on the screen next to the input element, because labels are programmatically associated with the input elements. For example, screen readers read the label text when the input element has focus.

Selecting a label activates the input and makes interaction easier. It also helps users with touchscreen devices. Instead of looking for a tiny checkbox on a phone, users can just select the label.

Here’s an example of an input text field with an associated label:

HTMLCopy

<label for="name">Name</label>
<input type="text" id="name">

Validation and error messages

Required fields

Let’s start with the simplest case: required fields. Rather than indicating these fields by using color coding or other custom UI elements, you can use the required attribute on the HTML input element. Screen readers can handle this attribute, and users on any browser see the required field interaction by using the standard UI for their platform.

HTMLCopy

<input type="text" id="name" required>

If you want to include more visual design for required elements, you can use the CSS pseudo-selector. It’s fine to provide other styling, but using the required attribute provides accessible indication to all users. The following CSS style sets the border color for required text boxes to red:

cssCopy

input:required
{
  border-color: red;
}

Input types

HTML form elements offer comprehensive validation support for common input types. Rather than using custom JavaScript and HTML to show a date picker, for instance, you can just use this code:

HTMLCopy

<input type="date" id="birthday">

This code provides a native date picker pop-up for the user’s browser and operating system. The date picker is tested for accessibility and it handles validation for you. There’s broad support for input types that used to require custom Regex validation, UI elements, and JavaScript:

• Email
• Date
• Month
• Week
• Time
• Range
• URL
• Color

So now you can write less code and it’s more accessible. It’s a win-win!

Tab order

Users who move through your form by using a keyboard or screen reader rely on tab order. It works unless you have a complicated form design or are trying to do something too fancy. It’s hard to mess up tab order for most forms. However, it’s an important feature to test.

You can test tab order by selecting the Tab key on your keyboard and checking the interaction. However, as we see in the next exercise, Accessibility Insights for Web can make this testing a lot easier.

agile project management certification training courses malaysia

One of the most important ways that users interact with web applications is by using forms to submit information. There are several important considerations in how you write your forms to make sure all of your users can move through, fill in, and submit them.

The fundamental concept is to use HTML the way it was designed. Standard HTML form elements are built for accessibility, but it’s easy to unconsciously override accessibility features with the latest JavaScript library or overly clever CSS.

Labels

Every input tag on your forms should have an associated <label> tag to identify it. This tag is different from just putting some text on the screen next to the input element, because labels are programmatically associated with the input elements. For example, screen readers read the label text when the input element has focus.

Selecting a label activates the input and makes interaction easier. It also helps users with touchscreen devices. Instead of looking for a tiny checkbox on a phone, users can just select the label.

Here’s an example of an input text field with an associated label:

HTMLCopy

<label for="name">Name</label>
<input type="text" id="name">

Validation and error messages

Required fields

Let’s start with the simplest case: required fields. Rather than indicating these fields by using color coding or other custom UI elements, you can use the required attribute on the HTML input element. Screen readers can handle this attribute, and users on any browser see the required field interaction by using the standard UI for their platform.

HTMLCopy

<input type="text" id="name" required>

If you want to include more visual design for required elements, you can use the CSS pseudo-selector. It’s fine to provide other styling, but using the required attribute provides accessible indication to all users. The following CSS style sets the border color for required text boxes to red:

cssCopy

input:required
{
  border-color: red;
}

Input types

HTML form elements offer comprehensive validation support for common input types. Rather than using custom JavaScript and HTML to show a date picker, for instance, you can just use this code:

HTMLCopy

<input type="date" id="birthday">

red hat certified system administrator rhcsa malaysia

The web is an amazing place, and it’s best when everyone can participate. The first step in building accessible web applications is a basic awareness of the diverse ways that users interact with those applications.

The importance of inclusive design

When you’re developing a web app, it’s easy to get into a workflow of writing some code, testing it in a browser, fixing bugs, repeat, repeat, repeat. Unfortunately, this approach leads to web apps that don’t work for everyone.

There are good reasons to consider accessibility in your web apps:

• A substantial number of your potential users might have one or more impairments that require them to interact differently with web apps. Improving accessibility increases your potential user base.
• Web apps are now under many legal requirements for compliance with web accessibility standards. Failure to incorporate accessibility into your development methodology can result in legal and financial penalties.
• Accessibility is a human right. Helping others to gain full access to the internet is the ethical thing to do.

We don’t all browse the same way

Web developers often focus on conventional browser-based interaction, but many users access applications in different ways.

Screen readers

One of the best-known accessibility tools is a screen reader. Screen readers are commonly used clients for people with vision impairments. They’re built into most operating systems.

At its most basic, a screen reader reads a page from top to bottom audibly. If your page is all text, the reader conveys the information in a similar way to a browser. It’s rare that webpages are purely text; they contain links, graphics, color, and other visual components. Care must be taken to ensure that a screen reader can correctly read this information.

Visual impairments

Visual ability is a spectrum. Some users require, or prefer, an auditory experience. Many prefer a visual experience but might encounter issues with small text or contrast.

Input devices

Developers commonly consider keyboard, mouse, and mobile touchscreen interactions in web apps. However, these devices are just some of the ways that users interact with computers and web apps. Other modes include ergonomic keyboards, chording keyboards, voice interaction, eye tracking, and head tracking.

The web is an accessible platform

All this information might seem a little daunting. Fortunately, HTML and web standards are designed for accessibility. In many cases, when you follow web standards, your web apps “just work” in various accessibility scenarios or require minor modification.

angular training courses malaysia

Before you can automate your website deployments, you need to deploy the existing eShop app manually to Azure Kubernetes Service (AKS). You create the Azure resources and deploy the app to AKS using Azure CLI commands and bash scripts. Finally, you create an Azure Active Directory (Azure AD) service principal to allow GitHub Actions to deploy to AKS and Azure Container Registry.

aws training courses malaysia

In a form, you should provide instructions to the website user on how to complete each value properly, but you should also check the values that they enter. Blazor provides simple tools that can perform this validation with the minimum of custom code.

In this unit, you learn how to annotate models so that Blazor knows what data to expect. You also learn how to configure a form so it validates and responds to user data correctly.

Validate user input in Blazor forms

When you collect information from a website user, it’s important to check that it makes sense and is in the right form:

• For business reasons: Customer information such as a telephone number or order details must be correct to give good service to users. For example, if your webpage can spot a malformed telephone number as soon as the user enters it, you can prevent costly delays later.
• For technical reasons: If your code uses form input for calculations or other processing, incorrect input can cause errors and exceptions.
• For security reasons: Malicious users might try to inject code by exploiting input fields that aren’t checked.

Website users are familiar with validation rules that check for the presence and correct format of the details they enter. Required fields are often marked with an asterisk or a Required label. If they omit a value or enter a poorly formatted value, they see a validation message instructing them on how to correct the problem. The validation message might appear when the user tabs out of a field or when they select the Submit button.

Here’s an example form where the user submits invalid data. In this case, there are validation messages at the bottom of the form and invalid fields are highlighted in red. You’ll build this form in the next exercise:

It’s a good idea to make validation messages as helpful as possible. Don’t assume any knowledge from the user; for example, not everyone knows the format of a valid email address.

When you use the EditForm component in Blazor, you have versatile validation options available without writing complex code:

• In your model, you can use data annotations against each property to tell Blazor when values are required and what format they should be in.
• Within your EditForm component, add the DataAnnotationsValidator component, which checks the model annotations against the user’s entered values.
• Use the ValidationSummary component when you want to display a summary of all the validation messages in a submitted form.
• Use the ValidationMessage component when you want to display the validation message for a specific model property.

Prepare models for validation

Start by telling the DataAnnotationsValidator component what valid data looks like. You declare validation restrictions by using annotation attributes in your data model. Consider this example:

C#Copy

using  System.ComponentModel.DataAnnotations;

public class Pizza
{
    public int Id { get; set; }
    
    [Required]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00)]
    public decimal Price { get; set; }
}

We use this model in a form that enables Blazing Pizza personnel to add new pizzas to the menu. It includes the [Required] attribute to ensure that the Name and Price values are always completed. It also uses the [Range] attribute to check that the price entered is within a sensible range for a pizza. Finally, it uses the [EmailAddress] attribute to check the ChefEmail value entered is a valid email address.

azure training courses malaysia

Users enter data using forms. In a classic web app, you create a form using the <form> element, and enable the user to provide data using <input> elements. When the user submits the form, the input can be validated. If the validation is successful, the appropriate actions can then be taken, such as using the information provided to add a new entry to a database or to update a record.

The facilities the <form> and <input> elements provide are simple but relatively primitive. Blazor extends the capabilities of forms with its <EditForm> component. Additionally, Blazor provides a series of specialized input elements that you can use to format and validate the data the user enters.

In this unit, you learn how to use the <EditForm> element and the input elements to build functional forms. You also see how to use data binding with a form.

What is an EditForm?

An EditForm is a Blazor component that fulfills the role of an HTML form on a Blazor page. The main differences between an EditForm and an HTML form are:

• Data binding: You can associate an object with an EditForm. The EditForm acts like a view of the object for data entry and display purposes.
• Validation: An EditForm provides extensive and extensible validation capabilities. You can add attributes to the elements in an EditForm that specify validation rules. The EditForm applies these rules automatically. This functionality is described in a later unit in this module.
• Form submission: An HTML form sends a post request to a form handler when the form is submitted. This form handler is expected to perform the submit process, and then display any results. An EditForm follows the Blazor event model; you specify a C# event handler that captures the OnSubmit event. The event handler performs the submit logic.
• Input elements: An HTML form uses an <input> control to gather user input, and a submit button to post the form for processing. An EditForm can use these same elements, but Blazor provides a library of input components that have other features, such as built-in validation and data binding.

Create an EditForm with data binding

The <EditForm> element supports data binding with the Model parameter. You specify an object as the argument for this parameter. The input elements in the EditForm can bind to properties and fields exposed by the model by using the @bind-Value parameter. The following example is based on the WeatherForecast class created by the default Blazor Server App template. The class looks like this:

C#Copy

public class WeatherForecast
{
    public DateTime Date { get; set; }

    public int TemperatureC { get; set; }

    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

    public string Summary { get; set; }
}

The model for the EditForm is an instance of the WeatherForecast class stored in the @currentForecast variable, and the input elements are bound to the fields in the class:

razorCopy

@page "/fetchdata"

@using WebApplication.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<input type="number" width="2" min="0" max="@upperIndex" @onchange="ChangeForecast" value="@index"/>

<EditForm Model=@currentForecast>
    <InputDate @bind-Value=currentForecast.Date></InputDate>
    <InputNumber @bind-Value=currentForecast.TemperatureC></InputNumber>
    <InputText @bind-Value=currentForecast.Summary></InputText>
</EditForm>

@code {
    private WeatherForecast[] forecasts;
    private WeatherForecast currentForecast;
    private int index = 0;
    private int upperIndex = 0;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
        currentForecast = forecasts[index];
        upperIndex = forecasts.Count() - 1;
    }

    private async Task ChangeForecast(ChangeEventArgs e)
    {
        index = int.Parse(e.Value as string);
        if (index <= upperIndex && index >= 0)
        {
            currentForecast = forecasts[index];
        }
    }
}

big data hadoop training courses malaysia

Most HTML elements expose events that are triggered when something significant happens. Such as, when a page finishes loading, the user clicks a button, or the contents of an HTML element are changed. An app can handle an event in several ways:

• The app can ignore the event.
• The app can run an event handler written in JavaScript to process the event.
• The app can run a Blazor event handler written in C# to process the event.

In this unit, you get a detailed look at the third option; how to create a Blazor event handler in C# to process an event.

Handle an event with Blazor and C#

Each element in the HTML markup of a Blazor app supports many events. Most of these events correspond to the DOM events available in regular web applications, but you can also create user-defined events that are triggered by writing code. To capture an event with Blazor, you write a C# method that handles the event, then bind the event to the method with a Blazor directive. For a DOM event, the Blazor directive shares the same name as the equivalent HTML event, such as @onkeydown or @onfocus. For example, the sample app generated by using the Blazor Server App contains the following code on the Counter.razor page. This page displays a button. When the user selects the button, the @onclick event triggers the IncrementCount method that increments a counter indicating how many times the button was clicked. The <p> element on the page displays the value of the counter variable:

razorCopy

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Many event handler methods take a parameter that provides extra contextual information. This parameter is known as an EventArgs parameter. For example, the @onclick event passes information about which button the user clicked, or whether they pressed a button such as Ctrl or Alt at the same time as clicking the button, in a MouseEventArgs parameter. You don’t need to provide this parameter when you call the method; the Blazor runtime adds it automatically. You can query this parameter in the event handler. The following code increments the counter shown in the previous example by five if the user presses the Ctrl key at the same time as clicking the button:

razorCopy

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>


@code {
    private int currentCount = 0;

    private void IncrementCount(MouseEventArgs e)
    {
        if (e.CtrlKey) // Ctrl key pressed as well
        {
            currentCount += 5;
        }
        else
        {
            currentCount++;
        }
    }
}

Other events provide different EventArgs parameters. For instance, the @onkeypress event passes a KeyboardEventArgs parameter that indicates which key the user pressed. For any of the DOM events, if you don’t need this information, you can omit the EventArgs parameter from the event handling method.

blockchaint raining courses malaysia

Now that the code is configured to generate an OpenAPI document file that describes the web API, VanArsdel’s development team turns their attention to publishing the application.

Seamless development experiences in Visual Studio, from code to deploy

In a fusion development team, time is one of the most valuable assets. You write code and build an app, then use different tools to deploy your app. You come back to the code, update it, and switch to the other tools for deployment. The cost for switching between tools is huge, and eventually it decreases your productivity.

What if your development tool, Visual Studio, can do everything for you in one place? It saves time and increases productivity. Visual Studio offers features to publish your app to Azure App Service.

Visual Studio also offers the feature to integrate your web API with Azure API Management while publishing the app.

In the next couple of exercises, you’ll explore how to publish your web API application to Azure App Service and integrate it using Azure API Management.

ibm aix system i training courses malaysia

Template components that you can reuse across multiple apps provide a foundation of tried and tested layout and logic for UI element customization. Template components apply a standardized design across a web app by defining common elements and applying them to all pages. Templates can streamline updates, such as rebranding, because you make modifications only at the central template location.

In this unit, you learn about template components and how you can incorporate them into a Blazor application.

ibm cognos bi training courses malaysia