This blog post will get you familiar with what has been added to our Xamarin PdfViewer control, and what is coming next in the official R3 2019 release.

Looking for an update on the latest improvements to the PdfViewer for Telerik UI for Xamarin, and a preview of what you can expect in next month's release? This post will get you up to speed with everything you need to know.

What’s New in PdfViewer?

With the second release of the year, the PdfViewer control went from beta to official. During this period, we continue improving the control and added a set of new features to it. Here is a list of features that were shipped with the R2 2019 release and the Service Pack:

Command improvements, including a new Double-Tapped command
Mechanism to detect when a document is loaded/unloaded
Read-on-demand feature
Automatic Fit-to-width
Various performance improvements in hardware acceleration and scrolling performance - so now the scrolling is significantly smoother, with no stutter or delay.

Pdf Viewer for Xamarin.Forms

Let’s take a closer look at some of the listed features above.

Commands Improvements

The FitToWidthCommand was improved. Now you can choose between two options:

FitDocumentToWidthCommand (default one) – The purpose of this command is to lookup the widest of all pages and set a zoom level, so that this page is fit to width. For example: If the document has pages with different width, as a side effect, when you are currently viewing a page that is not the widest, this page will not occupy the whole horizontal space.
FitPageToWidthCommand– This gives you the ability to execute fit to width on the current page, disregarding the width of the other pages in the PDF document.

DoubleTappedCommand

This command is different from the other PdfViewer Commands. It is triggered from within the PdfViewer on double-tap action. On the first double-tap the document is zoomed 2.5 times at the tapped location, another double-tap triggers the FitToWidth command.

Read-On-Demand Mode

This feature allows you to load each page of the document when needed to be shown in the PdfViewer. The page will be unloaded once it becomes invisible. Check here for more information on this.

You can take a look at other new PdfViewer features, which I described in my previous blog post: View PDF Documents with PdfViewer for Xamarin.Forms

What’s Coming to PdfViewer in the Official R3 2019 Release?

We have great news for you. In the middle of September our PdfViewer will include two new features: Selection and Link Annotations. We look forward to sharing more with you after the R3 2019 release. Hope you are as excited as we are!

Tell Us What You Think

We would love to hear what you think about the Telerik UI for Xamarin Pdf Viewer Control. If you have any ideas for features to add, please do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.

Don’t forget to check out the various demos of the controls in our SDK Sample Browser and the Telerik UI for Xamarin Demos application.

If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost.

Try Telerik UI for Xamarin

Happy coding with our controls!

Some aspects of accessibility can be tested with tooling but others, such as keyboard navigation, are better tested manually. Let's walk through best practices for keyboard navigation testing and explore navigation with VoiceOver, a popular screen reader.

When we talk about accessibility in the context of the web, we talk about building sites and apps that everyone can navigate and interact with. Many developers treat accessibility as an afterthought, thinking that only a minority of their userbase would benefit from the effort. They don’t realize that 15% of the world’s population lives with some form of disability. That’s one billion potential customers you’re turning away.

While some aspects of accessibility can be tested automatically with tooling, others, such as keyboard navigation or compatibility with various assistive technologies, are better tested manually. In this article, we’ll describe how to navigate our apps using the keyboard, and how to use VoiceOver, a popular screen reader that comes built into Apple’s iOS and macOS operating systems.

Navigating with the Keyboard

Why would someone navigate our app using the keyboard exclusively? Users with motor disabilities may not be able to rely on mice or trackpads to interact with their computer, because those devices require fine finger control. Users with visual disabilities may not be able to locate the cursor on the screen. You can probably think of other scenarios where navigating using the keyboard is preferred.

Navigating a web app using the keyboard is relatively straightforward:

Press Tab to move the focus through links and form controls, and Shift + Tab to move the focus backward.
Press Enter while focused on a link or button to interact with it.
Press Space while focused on a checkbox or dropdown to interact with it.
Press ↑, ↓, ←, and → to scroll vertically and horizontally, or to cycle through lists of options.
Press Escape to dismiss dialogs.

Image shows picture of a screen and shows the selections cycling

Here are the main things to watch out for when building our app so that we don’t break keyboard navigation:

Make sure it’s clear which element currently has focus. Sighted users rely on some kind of visual indicator to know where their focus is.
- Avoid removing the default outline of focusable elements with things like outline: 0 or outline: none.
Make sure all items on the page can be reached. Use the right tag for the job.
- Use <a> for navigation links.
- Use <button> for actions that don’t take the user to a new page.
- Use <input>, <textarea>, <select> and friends for form controls.
- Avoid building custom interactive controls using catch-all tags like <div> or <span>, unless you really know what you’re doing.
Make sure all sections of the page can be navigated to and from.
- Be careful when implementing dialogs and popups. Make sure they trap focus, and can be dismissed with the Escape key.
- Be careful when implementing features like infinite scroll. If you have an infinitely scrolling feed in the middle of the page, and a sidebar on the right, keyboard users may get trapped in the feed, and not be able to reach the sidebar.
Make sure the user can skip directly to the main content, especially if you have a lengthy navigation section. Keyboard users have to press the Tab key to navigate all interactive elements before they can get to the content they want. If all your app has a lengthy navigation, that experience can be extremely frustrating.
- Provide a link at the beginning of your app to skip to the main content.
- Provide ARIA landmarks by using tags like <header>, <nav> and <main>, or by using the role attribute.

A screen reader is a tool that reads out loud the contents being displayed on the screen. Visually impaired users rely on screen readers to be able to interact with their devices.

There’s quite a few screen readers in the market, but the top three players are JAWS, NVDA, and VoiceOver. The first two work on Windows, while the third one is included as part of Apple’s operating systems, such as iOS and macOS.

Screen readers are very complex tools, and becoming proficient with them can take a long time, but I want to give you a taste of what it’s like to consume a web app through a screen reader. We’ll be using VoiceOver on macOS in this article, but feel free to read the documentation for your screen reader of choice, and follow along.

The first thing we need to do is turn VoiceOver on by pressing Cmd + F5 (you may need to press Cmd + fn + F5 if you’re on a laptop). VoiceOver will start reading the contents of the active window. If you’ve never done this before, it can be an overwhelming experience, so know that you can turn it off by pressing the same key combination we used to turn it on.

Ok, now that you know how to turn it on and off, here are’s the most common shortcuts you’ll want to use to navigate a web app:

Press Ctrl + Alt + A to start reading content.
Press Ctrl to stop reading content.
Press Ctrl + Alt + → to read the next item, and Ctrl + Alt + ← to read the previous item.
Press Ctrl + Alt + Space to interact with the current item (e.g. click on a link).
Press Ctrl + Alt + Shift + ↓ to go into objects (e.g. sections of content, iframes), and Ctrl + Alt + Shift + ↑ to go out.
Press Ctrl + Alt + Cmd + H to jump to the next heading.
Press Ctrl + Alt + Cmd + L to jump to the next link.

animated image of screen showing how voiceover works as you cycle between the different buttons. The description of each button is displayed in a pop-up screen

VoiceOver has one cool feature called the rotor. It’s a dialog that allows you to navigate content by type (links, headings, landmarks, etc.). You can open the rotor by pressing Ctrl + Alt + U. You can rotate between content types with ← and →, and you can select an item by pressing ↑ and ↓, and then pressing Enter.

animated image of a screen showing the use of lists of elements by types. The demo shows someone cycling through elements of the same type in a menu and then shows how to cycle between lists of different types. Examples are shown for links and headings on the page

Using a screen reader as a sighted user doesn’t quite compare to how a real user would use it, but it can help us understand how our app is being consumed by part of our userbase.

Conclusion

By manually testing our web sites and apps for keyboard and screen reader navigation, we’re making sure we’re building an inclusive experience that can reach the widest audience possible. We also get a better understanding of the different ways in which our users consume the experiences we build, and we can think of options to improve them.

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper:Accessibility for Developers

Adding Accessibility to Your Apps

One easy way to make sure that you are creating accessible web apps is to start with components from the Kendo UI libraries. Our components are all WCAG complaint and give you great functionality from grids and charts to schedulers and pickers. Get a head start on your app's UI and a head start on accessibility compliance at the same time.

Learn more about: Kendo UI

In the latest release of Telerik UI for Blazor, we've got new controls for you as well as major upgrades to the Grid, Preview 8 compatibility and more. Check it out to see what's new.

With the version 1.6.0 release of Telerik UI for Blazor, our offering is expanding with two new controls in the Menu and TimePicker, as well as major enhancements in the Grid! In this blog post we will reveal more details about the latest additions to the Telerik UI for Blazor component family and how you can use them to enhance your Blazor application.

We also have some exciting news for all of you planning to attend one of the major .NET conferences in September - BASTA.

New Blazor Components

With the 1.6.0 release we are introducing two new essential components: Say hello to the <TelerikMenu> and <TelerikTimePicker> tags!

New Blazor Component: Menu

Blazor apps can now have a stylish menu and built-in navigation effortlessly. Simply add the TelerikMenu tag and provide a collection of models to its Data property.

<TelerikMenu Data="@MenuItems"> </TelerikMenu>

For each Blazor Menu Item you can control the structure, look and feel, as well as the behavior using the following fields in their data binding: id, ParentId, HasChildren, Items, Text, Icon, URL and the OnSelected event.

The Blazor Menu component can be bound to data and display flat or hierarchical information.

Telerik Blazor Menu

Telerik UI for Blazor Menu (Flat Data)

We know that data models may have properties that do not map to the same name as the fields found in the Telerik UI for Blazor components, which is why we allow for you to simply define your own fields in the configuration of the menu component. You need to provide the relationship between the menu item properties and the model field to which the menu is bound. To achieve this in flat data binding, use the properties in the main TelerikMenu tag like in the example below:

IdField => Id
ParentIdField => ParentId
TextField => Text

@using Telerik.Blazor.Components.Menu
<TelerikMenu Data="@MenuItems"
             ParentIdField="@nameof(MenuItem.ParentId)"
             IdField="@nameof(MenuItem.Id)"
             TextField="@nameof(MenuItem.Text)">
</TelerikMenu>

For more information on how to achieve data binding to hierarchical data in the Menu component, check out the details in our Blazor documentation.

erik Blazor Menu With Hierarchy

Telerik UI for Blazor Menu (Hierarchical Data)

To enable navigation in the Telerik Blazor Menu you are equipped with two options:

As a straightforward approach you can use the built-in property UrlField to populate the URLs in the anchors
For a more custom and fine-tuned approach you can use a Template to generate the desired links which gives you more control over customizing the look and feel of each menu item

Considering that menus can be used in various scenarios and layouts we have enabled horizontal and vertical orientation to suit all application scenarios.

Telerik Blazor Menu Horizontal and Vertical Orientation

Telerik UI for Blazor Menu (Horizontal and Vertical Orientation)

And because with Menus we always want to be able to execute some custom code when clicking on an item, in the Telerik Menu for Blazor we have exposed the OnClick event. When a user clicks/taps on a menu item, the OnClick event is fired, passing along the underlying data item as an argument. Depending on your use case you can then load some different content, or respond with any other particular logic.

New Blazor Component: TimePicker

With our 1.2.0 release we introduced the Blazor DatePicker component, and with this release we are enriching the suite with time preference control. The Blazor TimePicker component allows for the selection of time from a visual list in a dropdown, or typing into a date input that accepts only DateTime values.

Telerik Blazor TimePicker Telerik UI for Blazor TimePicker

You can use the standard datetime format:

<TelerikTimePicker Format="t" @bind-Value="@DateTime.Now" Width="100%"></TelerikTimePicker>

Or customize the format based on the application needs:

<TelerikTimePicker Format="HH:mm:ss tt" @bind-Value="@ DateTime.Now" Width="100%"></TelerikTimePicker>

There are multiple properties that you can configure to further adapt the usage of the component such as: Min, Max, Value and Width.

If you need to handle with specific logic the changes in the input such as keyboard stroke, Set or Now buttons in the dropdown you can use the ValueChangedEvent.

@using Telerik.Blazor.Components.TimePicker
<TelerikTimePicker ValueChanged="@( (DateTime d) => ChangedValueHandler(d) )"></TelerikTimePicker>
<br />
@result
@code {
    string result;
    private void ChangedValueHandler (DateTime userInput)
    {
        result = string.Format("The user entered: {0}", userInput);
    }}

Blazor Grid Enhancements

With every release, the Telerik UI for Blazor Team makes sure that the most significant and desired Blazor UI component – the Grid – gets better and richer in functionality too.

Grid Grouping

In the 1.6.0 release we focused our efforts on ensuring that grouping in Telerik Blazor Grid component is breezy – just set the Groupable property to "True". This will enable your users to simply drag one or more column headers to the group panel and the Grid will visualize the grouped data.

Telerik Blazor Grid Grouping

Telerik UI for Blazor Grid Grouping

To remove a group setting, click the [x] button on its indicator in the group panel and the corresponding data will no longer be associated with that group.

For more complex scenarios you can also nest groups and reorder selected groups in a desired position, all of which happens with a simple drag of a column header.

Grid Rows Selection

Grid rows now support single and multiple selection options which can be configured by setting the SelectionMode to SelectionMode="GridSelectionMode.Single" or SelectionMode="GridSelectionMode.Multiple" (or disable Selection by setting SelectionMode=”GridSelectionMode.None”)

To track user selection in your applications you can use two-way binding through the SelectedItems property, or SelectedItemsChanged event.

Telerik Blazor Grid Row Selection Telerik UI for Blazor Grid Row Selection

The Grid also supports an option for row selection via a checkbox column. To define it, add a TelerikGridCheckboxColumn in the TelerikGridColumns collection of the grid.

@using Telerik.Blazor.Components.Grid
<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Multiple"
             Pageable="true"
             PageSize="10">
    <TelerikGridColumns>
        <TelerikGridCheckboxColumn SelectAll="true"></TelerikGridCheckboxColumn>
        <TelerikGridColumn Field=@nameof(Product.Id) />
        <TelerikGridColumn Field=@nameof(Product.Name) Title="Product Name" />
        <TelerikGridColumn Field=@nameof(Product.Price) Title="Unit Price" />
    </TelerikGridColumns>
</TelerikGrid>

Telerik Blazor Grid Row Multi-Selection Telerik UI for Blazor GridRow Selection via Checkboxes

In Multiple SelectionMode, selection can be made using the following approaches:

Select the checkbox of each desired row
Press and hold Ctrl, and click the desired rows
For range selection, you could use the Shift key and click the row you want to be the last in the range

Preview 8 Compatibility

Looking ahead to the official release of ASP.NET Core 3.0 next month, we are aiming at continuously providing you with interim versions of our Blazor components compatible with each official preview by Microsoft.

Last week we announced that we are fully compatible with the latest changes included in ASP.NET Core 3.0 Preview 8.

Let’s Meet at BASTA

For those of you who plan to be in Mainz at end of September, the Telerik UI for Blazor Team will be part of the BASTA conference. Come meet our team at the Progress Telerikbooth to chat about the future of Blazor and participate in our “Code for Charity” game.

We encourage you to attend the engaging and provocative keynote speech by our Manager of Software Engineering, Pavlina Hadzhieva: Goodbye, Client-side JavaScript – Hello, Blazor.

Experience Telerik UI for Blazor 1.6.0

If you are new to Blazor, visit the Telerik UI for Blazor overview page and sign up for a trial experience - it’s as easy as a single button click! Then, just follow the Blazor demos and documentation.

Start My Trial Now

Share Your Feedback!

We encourage all our early adopters and fans to continue providing valuable feedback! If there are features you are missing, or components you need, please head over to the official Telerik UI for Blazor feedback portal and submit your ideas.

Happy Blazor Coding from the Telerik Blazor Team at Progress!

Learn all about what accessibility testing is, how to perform it and why it's so important.

Over 40 million individuals are living with disabilities of some sort in the United States alone. When it comes to the internet, it’s important to cater to people with disabilities to ensure websites are usable for all users. When you make your website accessible, you’re helping those with disabilities stay active and included in society. Plus, you’re making your website easier to read and navigate for people without disabilities.

What is Accessibility Testing?

Accessibility testing, a subset of usability testing, involves performing tests via software to ensure people with disabilities are able to use a website without experiencing any sort of barriers. Essentially, accessibility testing is the process that must take place prior to addressing accessibility issues on any given website. This is necessary to ensure you’re meeting the WCAG guidelines.

For nearly any website, a combination of manual and automated accessibility testing should take place as early as possible during the design and development phase, as well as often throughout design and development.

Why Perform Accessibility Testing?

Products, including websites, should be delivered to people of all types, including people with disabilities, to ensure inclusivity. For those with disabilities, assistive technologies are available to help them better leverage the internet. However, websites must be designed with these assistive technologies in mind—from screen magnification software to screen readers to speech recognition software and everything in between.

Accessibility testing helps to ensure websites are user-friendly and accessible to everyone, including people with disabilities who rely on assistive technologies. Ultimately, accessibility testing will ensure usability for all disabilities, including visual, auditory, speech, cognitive, and more, as well as usability for individuals who do not have a disability but can still benefit from websites being easier to read and navigate.

So why, aside from being inclusive, should you make sure your website is accessible through accessibility testing?

Boost Visibility to a Greater Market

Chances are, your product and/or service would be of interest for persons with disabilities. Think about how much of the population has a disability of some sort. You don’t want to eliminate such a large portion of the population from becoming a potential customer.

Lower Site Development and/or Maintenance Costs

If you make your website accessible from the beginning, you’ll spend much less money on development and/or maintenance in the long-run. It’s also much quicker to make changes as needed to a website that’s already accessible from the start. After all, compliance with applicable standards and guidelines will be mandatory eventually.

Improve Usability on Different Browsers and/or Devices

Websites that are accessible will operate better on a variety of browsers and/or devices than those that aren’t accessible. They will work better for those in situationally challenging circumstances as well, such as noisy airports or natural lighting that causes glare.

Common Disabilities

A disability is any condition of the mind or body that makes it difficult for the individual to perform certain activities or interact with society and/or the world around them. Disabilities are known for resulting in limitations in terms of participation and activity. There are many different types of disabilities, including but not limited to:

1. Cognitive

Cognitive disabilities are the most common form of disability an individual can experience. They often result from conditions present at birth or conditions developed at some point in life, such as chemical imbalances, infections, traumatic injuries, and more. There are approximately 16 million people impacted by a cognitive disability in the United States, although two people with the same cognitive disability may experience entirely separate challenges.

Most individuals with a cognitive disability will require assistance, to some degree, to help them approach their day-to-day lives. Cognitive disabilities are classified in two ways: clinical and functional. The clinical category includes Down syndrome, autism, dementia, and traumatic brain injuries, as well as various other less severe conditions. The functional category, on the other hand, focuses on the individual’s abilities and challenges resulting from the disability, such as:

Memory
Problem-solving
Reading/verbal comprehension
Attention
Math comprehension
Visual comprehension

The functional category is particularly helpful to be aware of when developing websites. This allows us to review the types of barriers those with cognitive disabilities face—helping to ensure websites address those barriers in all technical and navigational aspects.

2. Blindness

Blindness is characterized as sightlessness or loss of vision. When we speak of blindness, we generally are referring to a total loss of vision, whereas partial blindness refers to low vision. Blindness has several potential causes, including but not limited to the following:

Glaucoma
Stroke
Diabetes
Macular degeneration
Accidents or injuries to the eye
Retinitis Pigmentosa

Approximately 285 million people are visually impaired to some degree worldwide. Of those 285 million people, 39 million are completely blind. Those who are blind use the internet with a range of assistive technologies, such as screen readers, braille devices, and keyboards.

When web developers don’t consider blindness while developing websites, those who are blind aren’t able to use those websites unless they’re gathering information from someone else.

3. Vision Disabilities

Vision disabilities, also known as visual impairment, refers to a decreased ability to see that cannot be solved with medication or glasses. Visual impairment can result from trauma, disease, as well as degenerative or congenital conditions. Some eye disorders leading to visual impairment include:

Glaucoma
Cataracts
Retinal degeneration
Albinism
Muscular problems
Infection
Diabetic retinopathy
And more

In addition, visual impairment can result from brain and nerve disorders. When this happens, it’s known as cortical visual impairment. As mentioned above, there are approximately 285 million people with visual impairment worldwide. Of those individuals, 246 million have low vision as opposed to being completely blind.

Similar to blindness, web developers must consider those with visual impairment as they often use various assistive technologies to access the web. Websites must be made accessible and able to support those assistive technologies.

4. Deafblindness

Deafblindness refers to having little or no sight and hearing. Those who are deafblind may experience varying degrees of sight and hearing impairment. A person may be deaf or blind at birth and lose the other sense at some point throughout life. A person who is born deaf/blind has congenital deafblindness, while a person who loses one or both of the senses at some point in life has acquired deafblindness.

Helen Keller is a very well-known example of someone who had deafblindness. There are approximately 35,000 – 40,000 individuals who are medically deafblind in the United States. Congenital deafblindness can be caused by the following:

Genetic conditions from birth, such as trisomy 13
Illness or infection, such as AIDs or rubella
Pregnancy-related problems, such as fetal alcohol syndrome
Complications related to prematurity

Those who end up with deafblindness at some point in life usually acquire it due to a variety of reasons:

Genetic conditions, such as usher syndrome
Meningitis
Illness
Age-related loss of sight and/or sound
Physical damage
Stroke
Brain damage

Those who are deafblind rely on various assistive technologies, such as braille displays or screen readers, to leverage the internet in life-changing ways. Web developers must consider those with deafblindness during the design phase of any given website.

5. Physical Impairments

A physical impairment refers to any disability that limits a person’s ability to remain mobile or active. Essentially, physical impairments impact functioning, mobility, stamina or dexterity. This can include:

Brain or spinal cord injuries
Cerebral palsy
Multiple sclerosis
Respiratory disorders
Epilepsy
And much more

Physical impairments significantly impact the individual’s ability to take part in various activities throughout day-to-day living. They usually fall into one of two main categories:

Congenital: The physical impairment occurred due to inherited genetic problems or other issues at birth.
Acquired: The physical impairment occurred due to an accident, disease or infection at some point in life.

Those with physical disabilities make up a large amount of the population. In fact, approximately 75 million people have some type of physical disability throughout the United States. Physical disabilities often include weakness and limitations in terms of muscular control. This means web developers must consider any design and/or functionality aspects that would be impossible with involuntary movements, tremors or lack of coordination.

How to Do Accessibility Testing

The web is an incredibly important resource for everyone, including people with disabilities. It makes many aspects of life—from healthcare to recreation to employment—much easier than they would be without the web. The benefits of performing accessibility testing are clear, but where do you start? As web accessibility becomes a more prevalent topic, training programs are popping up all over the place to help teach individuals how to create accessible content.

Most training programs focus on the WCAG 2.1 guidelines, which provide various technical specifications and techniques for web developers to follow when it comes to creating accessible content. So how do you perform accessibility testing?

1. Start Learning about Accessibility

The first step to performing accessibility testing is learning how to create accessible content. After all, you don’t want to go through the process of testing something that isn’t even close to accessible. This article about “where to learn web accessibility” is a great start. It reviews various resources to help web developers and businesses learn more about web accessibility, many of which are free of charge. Here are a few resources to consider:

Google’s Introduction to Web Accessibility

Google offers an introductory guide, as well as practice design labs and samples for those looking to learn web accessibility. There is no requirement of prerequisite knowledge, but it is helpful to have some background in web design. The course teaches what accessibility is, advanced accessibility techniques, and more important information to create usable and accessible websites.

International Association of Accessibility Professionals Certification (IAAP)

The IAAP offers a certification program that helps individuals add to their professional qualifications with proof of capabilities and/or knowledge of accessibility. The IAAP offers two types of certifications: a professional level credential and a technical level credential. You don’t have to be a member of the IAAP to take any certification course, and prior experience is not necessary but helpful.

Microsoft’s Training Teachers to Author Accessible Content

Microsoft offers an hour-long course, separated into ten modules, on web accessibility. A valid Microsoft account is necessary to complete the course on their website. Each module has course notes and a video provided to individuals taking the course. You will learn how to create and revise documents so everyone, including those with disabilities, can access them.

2. Perform Manual Testing

There are a lot of accessibility issues that might be missed with a computer program. Manual testing involves having human testers perform a range of tests to ensure the website is actually usable for individuals with disabilities. Similar to any type of editing or quality assurance, you’re able to get an entirely new viewpoint with each person who performs manual testing. Testers will look for:

Compatibility with various assistive technologies
Navigation that is simple and easy to understand
Content that is meaningful and clear/concise
Coordination with color adjustment plugins for various web browsers
And much more

Any testers used should be familiar with the latest standards when it comes to web accessibility. That means they must understand WCAG 2.1 to ensure they’re looking for the right factors that matter to people with disabilities.

3. Perform Automated Testing

Automated testing is the process of using software tools designed to find accessibility issues. These tools have evolved quite a bit over the past few years. It’s not difficult to find a range of tools available to help you adhere to accessibility guidelines. In fact, there are browser extensions, command-line tools, and much more. These tools should be used at the beginning of the design process and periodically throughout to catch issues before they go into production.

Why Use Manual and Automated Testing?

Manual and automated testing should be used in combination with one another in order to ensure a thorough testing process that doesn’t miss anything important. Automated tools are great for finding:

Images without alt text
Content that doesn’t have headings
HTML code that isn’t valid
Form fields that are missing labels and/or descriptions
And much more

However, as much as technology has advanced, human intervention can help find issues that no software tool is able to pinpoint, such as:

Alt text that isn’t accurate given the context
Descriptions that aren’t clear or easy to understand
Headings that don’t make sense given the hierarchy
And much more

From a usability standpoint, something like a misleading alt tag makes a world of difference, even though it’s not findable with an automated tool.

Automated Accessibility Testing Tools

As mentioned, there’s a wide range of software tools available for automated testing. The process of testing for accessibility should be ongoing throughout all stages of development. If you have the means, a continuous integration solution can be very beneficial. Some common tools for automated testing include:

1. Dyno Mapper

Dyno Mapper allows you to test entire websites for WCAG 1.0, 2.0, 2.1/Section 508 compliance, as well as various other guidelines:

BITV 1.0 (Level 2)
Stanca Act

The tool offers various features to ensure you’re able to fix any known errors in web content and design:

The ability to visualize: Use a browser to view accessibility tests with icons showing over the website image to indicate known, likely, and potential issues.
Check public or private applications: Check public or private applications with basic authentication, CMS authentication or custom form authentication.
Perform ongoing automatic testing/monitoring: Use the schedule feature to ensure automatic testing and reporting on a monthly basis.
Receive notifications when issues arise: If an issue is found, you will receive notifications sent to your email to alert you of known, likely, and potential issues.

2. SiteImprove

SiteImprove allows you to ensure your website is inclusive and usable for every visitor that comes your way. This helps you adhere to various global accessibility guidelines, including WCAG 2.1, with features such as:

Accessibility diagnosis: Use practical recommendations, your own criteria or the tool’s scoring system to decide which issues you want to fix first.
On-page and in-code highlights: View issues with on-page and in-code highlights that make it simpler than ever to fix errors.
Quality assurance/accessibility dashboards: See how far you’ve come in terms of accessibility with customizable dashboards and automated reports.

The tool lets you see every link, page, and media file at a glance—locating issues that could impact your site’s accessibility level.

3. Monsido

Monsido scans your website for any issues that may be stopping you from reaching ADA compliance with Section 508 and WCAG 2.1 standards. You’re able to leverage this tool to:

Choose the compliance level you need: Not all sectors have the same compliance requirements, so you’re able to check for WCAG 2.1 or Section 508 accessibility issues.
Leverage a built-in help center: A help center is available via an icon for times when you’re not quite sure how to fix an issue and would like some detailed information or instructions.
View your accessibility status: Compliance standards are organized by levels, such as A, AA, and AAA—allowing you to fix low-level issues first and foremost before putting time into high-level issues.
Reach out for training sessions: Take advantage of training and one-on-one support options available to you and your team to ensure you’re up-to-date on the latest best practices.

The tool will scan your domain on a weekly basis to help ensure compliance at all times. This information can be found in the dashboard wherein you can see a total count of issues and which pages they’re found on.

Accessibility Testing Checklist

When it comes to accessibility testing, it might feel like there’s a lot of work to do, and while that’s true, a checklist can make the process a lot easier. Here’s an accessibility testing checklist to follow.

TEXT

Can users enlarge the text if needed?
Is there enough contrast between the text color and the background color?
Does the website use bold, underlined, and italics when needed?
Are the navigation items labeled clearly in a way that’s understandable?
Is the font easy to read, and if not, can the user override fonts for text displays?

VIDEO AND AUDIO

Do all video and audio clips used fit with the content shown on the page?
Are subtitles or transcripts available for any form of multimedia used?
Can video and audio clips be stopped once the page loads?
Are video and audio clips dangerous for those sensitive to light and sound?
Are users able to adjust audio or video controls as needed?

COLOR AND CONTRAST

Do background and foreground colors have enough contrast?
Is color-coding used as a means of conveying information or indicating actions?

IMAGES

Do all images used have a purpose (to convey information)?
Is the site loading slowly because of too many images?
Do all images have alternate text to go with them?
Are there low contrast/extremely bright colors that may be difficult to view?
Do any images flash, rotate or move without the ability to stop them?

LANGUAGE

Are you using a higher than average vocabulary?
Is the language clear and concise without confusing terms?
Are there links to explain words that might be advanced?

FORMS

Are text boxes within forms clearly labeled?
Are text boxes organized properly and predictably (name, address, city, etc.)?
Can forms be filled out using the keyboard to go from one box to the next?

HEADINGS

Are headings simple and descriptive so the meaning is clear to users?
Is there a linked table of contents on pages with a lot of information?

For more information on what to look for when accessibility testing, check out this complete web accessibility testing checklist.

Conclusion

Web accessibility testing is fundamental to ensure people with disabilities are able to use your website without barriers. Once your website is made accessible, you can rest assured knowing you’re meeting your legal obligations while helping to improve inclusivity for all individuals, including the millions of people around the world with one or more forms of disability.

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper:Accessibility for Developers

Adding Accessibility to Your Apps

Learn more about: Kendo UI

It's critical to implement accessibility the right way from the start. In these case studies, we can learn from how other companies have succeeded (or not) and how we can do it better ourselves.

The Case for Accessibility

According to authorized research, about 18% of the world’s population has a disability that inhibits access to digital content, with seniors making up about 50% of those people. [1] That 18% has to fight through digital interactions that can leave them frustrated and isolated. [2]

So these numbers tell us that there is a significant portion of the population that relies on accessibility. However, if that’s not enough to encourage your client, boss or project manager to abide by the rules of accessibility, let them know how great of an opportunity they’re missing.

Implementing accessibility increases traffic and improves search engine ranking. [1]Legal & General Group or L&G has witnessed it firsthand. In a matter of 24 hours after implementing some accessibility fixes based on an accessibility audit, they saw a 25% increase in traffic coming from search engines. It soon increased to 50%, and their conversion rate doubled within the first three months. In terms of ROI, the investment they made in their site’s accessibility resulted in 100% return on investment in only one year. [1] I was a digital marketer in the past, and I haven’t heard of anything as simple as this that could land such results.

Also, you don’t really have a choice. Especially if you’re big in your industry. Target learned its lesson the hard way: They only agreed to make their site accessible after having to pay roughly $10 million to settle a class lawsuit with the National Federation of the Blind. [3]

But web accessibility is not just about avoiding lawsuits or being inclusive – there is also a business case to be made out of it. The global market of people with disabilities is estimated to be worth $6 trillion. [4] So think twice if you consider accessibility to not be a priority.

Mobility Impairments ✋ Case Study

A lot of us think that accessibility is rules and best practices to respect when designing and developing an interface. Well, like for mobile interfaces, the best results come when you think about accessibility from day one by including user personas that include people with disabilities.

A great example is CityMaas Assist. CityMaas Assist’s mission is to provide city travel information primarily to people with “varying abilities and disabilities” through features that are designed to answer the need of their target users. [2]

The design team started by collecting information on the different obstacles users usually encounter while traveling around the city. Their designers travelled a whole afternoon with their founder (who is wheelchair bound and unable to use his arms), using different types of transportation to understand the pain points he encounters and what features could help overcome them. [2]

With this information in hand, the designers were able to create a user persona to which they can relate to carry out the UX and UI design process. [2]

The essential features that came of this process were: [2]

The ability to plan one’s journey from a to z, including the information that must be known regarding his needs
Book and pay for all his tickets in advance from one app
Checking the availability of wheelchair access throughout the whole journey
Calling for assistance from any point on the app

In terms of design requirements, the team took the following considerations: [2]

Source: City Aide — A UX/UI Case Study

Choosing “FS Me,” a typeface specifically designed to improve legibility.
Going for a color palette that consisted of a strong green (buttons/CTAs), a bright blue for important CTAs and a dark blue-gray for the background. This was because:
- Yellow affects people with autism
- Orange and red are off limits for colorblind people
- Need to keep a high level of contrast
Keeping a clean and concise layout, by keeping the onscreen info to a minimum (to not overwhelm users who are sensitive to a large flow of information)
Simplifying the directions on the navigation screen but also enlarge the most important instructions
Add an SOS light blue button visible on all screens throughout the app in the top right corner (visible but not getting in the way)
Using easy-to-understand iconography accompanied with its text description, to avoid confusion
Buttons were made much larger than the 44*44pt recommended by Apple’s Human Interface Guidelines

Even though this is an app that was specifically designed for people with disabilities, it gives us an insight on how we can include specific user personas in our design thought and process since day one.

Hearing Impairments Case Study

We could think that how we can accommodate people who have hearing impairments is quite straightforward, but there are some details that can make a difference and obstruct them from fully experiencing a product or a service.

For example, of course Netflix offers closed captioning, but it has to take into consideration not only closed captioning for dialogue but also for surrounding sounds. [5]

Another simple feature that makes a huge difference is the option on Apple products to use Mono Audio (playing both left and right audio channels through the one of your choice) or adjusting the audio balance in both ears. This allows people with hearing disabilities to not miss on a basic experience like listening to or even practicing music like anybody else. It’s simple but it’s no small feature. Remember how frustrating it was when one of your earphone’s earbuds wasn’t working? Well imagine having to deal with that for life! [6]

Visual Impairments ️ Case Study

A study has reported that 30.4% of disabled people are just losing so much time when using a web platform. This could because there is no alternative text (ALT) for pictures, or, in some cases, the page design can cause the screen reader to give wrong feedback to the user, ending up causing the user to click on the wrong link. [7]

An interesting case I came across is the one of the BBC iPlayer. It shows that even when you have “all of the traditional ingredients [best practices and guidelines] of an accessible page in place,” it doesn’t mean that its accessibility is best optimized for a screen reader user. [8]

For example: [8]

Navigation links like “categories”, “channels” and “A to Z” are located way down the page, so screen reader users have to go through the whole page before being able to get to know where they need to go to fetch the content they want.

Source: Accessibility Originates With UX: A BBC iPlayer Case Study

Links were read twice because the thumbnail image and the heading had separate links that both redirected to the same program. This made it confusing to the screen reader users.
When keyboard access users clicked the first time on the “categories” link, a panel with only four items would be shown and they had to click again to see the whole listing. How would they know? This one just resulted in users giving up ALTOGETHER on using the platform.

So accessibility guidelines were respected in the development of the website, but accessibility wasn’t being truly considered during the design process. [8]

As Henny Swan (the author of this case study) puts it: “Part of the issue is that standards and guidelines tend to focus more on code than design, more on output than outcome, more on compliance than experience. As such, technically compliant pages could be built that are not the most usable for disabled users.” [8]

This was a great lesson for the BBC team that we can also learn from.

What they did next was to reconsider their whole design framework. Instead of basing their accessibility efforts on standards and guidelines, they used these standards to inform their newly conceptualized design framework from the inside out. [8]

This new design framework consisted of four UX principles: give users choice, put them in control, design with familiarity in mind, and prioritize features that add value. [8]

This translates into not assuming which way the user wants to access certain content or features, be it in terms of navigation or comprehension. [8]

It also means that the visual patterns and the language used must be familiar. Of course designers should not restrain their creativity, but they also need to keep a certain balance between the new and the old to not confuse users, because they rely on familiar design patterns to navigate pages and access features. The same goes for wording – consistent labeling should be used for headings, buttons, navigation links, and alternative text too. [8]

Finally, we should keep in mind that features we consider small for users without disabilities can have tremendous impact on a user’s experience who does have a disability. You may directly think of closed captions, but there are other features out there that have the same impact.

For example, adding a favorites page on the BBC iPlayer platform may seem like a “nice to have” for users without disabilities, but it made a huge difference for users with a disability. It was even the single most requested feature from that user group because it allowed them to access their favorite content without the usual hassle they had to get through every time. [8]

Taking one step further into what great features look like, let’s talk one second about Facebook’s automatic alternative text. [9]

It’s a great testimony of the potential contribution of artificial intelligence to accessibility.

Previously, screen reader users on social media only heard the word “photo” or “video” when they came across them on their newsfeed. [9]

It’s quite reducing (to say the least) as a social media experience, because that’s almost all we share all day long on social media.

But now, Facebook has implemented object recognition technology (a computer vision technique for identifying objects in images and videos), so people who use screen readers on an iOS device will hear, “Image may contain three people, smiling, outdoors.” [9] This allows them to join in in the conversation!

Cognitive Disabilities Case Study

So far, we went through sensory and physical impairments, but the user experience can be as complicated for people with cognitive disabilities as it is for the other impairments.

Among the issues users with cognitive disabilities encounter are:
- Inability to remember passwords if the user has a short-term memory impairment [10]
- Not understanding instructions when unfamiliar or complicated language is used. This is common to people with language and communication related disabilities [10]
- Difficulty to focus on tasks when a page is full of distracting elements or interrupting popups / notifications [10]

Although I’ve come across a lot of best practices and guidelines to build accessible platforms for people with cognitive disabilities, I am actually a little disappointed because I wasn’t able to find a true example of designing accessibility from day one for cognitively disabled people.

If you come across an interesting case, share it with us in the comments.

However, I was able to find a study made by the Institute on Disabilities that showed what people with cognitive disabilities prioritized as top access guidelines: [11]

Use pictures, icons and symbols along with text
Use clear and simple text
Use consistent navigation and design on every page
Use headings, titles and prompts
Support screen readers. Use alternate text tags
Use larger fonts – fonts in minimum 12pt or 14pt
Uncluttered, simple screen layout
Maintain white space: Use wide margins
Make your website customizable, giving users control of: type size, placement of navigation (right, left side), contrast, large print, sound
Use exit, home, help, next page buttons on every page
Use sans serif fonts, such as Arial, Verdana, Helvetica, Tahoma
Make navigation buttons clear, large, and consistent
Use numbered lists rather than bullets
Support font enlargement for web browsers
Use color for contrast
Check reading level with automated tools
Don’t right justify text; use ragged-edge righthand margins
Use lower case, no ALL CAPS
Provide voice captions (audio files) for text
Provide audio/voice-overs where the words are read aloud
Use navigation methods (i.e. “undo” or “back button” to help user recover when lost)
Give feedback on a user’s actions (e.g. confirm correct choices, alert users to errors or possible errors)

Lastly, I want again to go through some built-in features Apple provides, because they really do a great job building simple features that let users with impairments have almost a similar experience using their products as users without disabilities:

People with cognitive disabilities find it easier to learn using hearing rather than reading. Text to Speech reads aloud anything you highlight across 42 languages and in any voice and rate that suits the user’s preferences, and Speak Screen reads the whole content on a page to the user. [6]
Darker backgrounds help users with cognitive impairments focus, so when they activate the Dark Mode on Mac OS, text turns white and the background turns dark on built-in apps like the Calendar and Mail apps. [6] I actually use it just because it’s much better in my opinion.
Sometimes we come across this feature by accident and may find it annoying when that’s the case and we weren’t trying to look up a word. But for many users with learning impairments, the Dictionary feature is helpful because they can access it from anywhere on their computer without disrupting their reading experience. [6]
For some people, the web experience is overwhelming – even people with no focus impairment find the internet overwhelming. Using Safari Reader, users can focus on the content they want by stripping away ads, buttons, and navigation bars. [6]

Conclusion

I think that we can all agree that developing true accessibility for users with disabilities is not only about following guidelines, it’s about relying on a design framework that empowers all users regardless of their condition.

This means that accessibility is also about letting users access features and content in any way that they see fit, keeping their options open.

Because, at the origin of it all, technology is about giving more control to people, not restricting them with our pre-made assumptions of what’s right for them and ignoring the other possible options they may prefer.

The good news is that technology is the gift that keeps on giving – to all of us if we use it right. It can bridge the divide between differing levels of instead of reinforcing that divide.

P.S. I didn’t mention per say neurological disabilities, because, when talking about sensory, physical and cognitive impairments and disabilities, we cover the implications of living with a neurological disability.

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper:Accessibility for Developers

Adding Accessibility to Your Apps

Learn more about: Kendo UI

Sources:

[1] Make-Sense - Web Accessibility Benefits – Case Study
[2] Jimmy Hay - CCity Aide — A UX/UI Case Study.
[3] Jonathon Hensley - The high cost of digital discrimination: why companies should care about web accessibility
[4] W3C Web Accessibility Initiative (WAI) - The Business Case for Digital Accessibility
[5] Adina Katz - Accessibility and Usability: A Case Study With Netflix
[6] Apple - Technology is most powerful when it empowers everyone
[7] Mohammed Saleh Hassouna, Noraidah Sahari & Amirah Ismail - University Website Accessibility for Totally Blind Users
[8] Henny Swan - Accessibility Originates With UX: A BBC iPlayer Case Study
[9] Facebook Newsroom - Using Artificial Intelligence to Help Blind People ‘See’ Facebook
[10] W3C Web Accessibility Initiative (WAI) - Making Content Usable for People with Cognitive and Learning Disabilities
[11] Mark G. Friedman and Diane Nelson Bryen - Web accessibility design recommendations for people with cognitive disabilities

Telerik UI for ASP.NET AJAX is loaded with updates, from a modern look and feel with custom styling to new controls like conversational UI integration. WebForms developers continue to get love from a continuously improving UI suite.

You may have heard some rumors like: “WebForms is dead?”, “AJAX is no more!”, “the AJAX suite evolution is abandoned” or others like it. With the new suites for ASP.NET Core and Blazor, it is natural for people to talk, but be sure, these are only rumors.

The purpose of this blog post is to bust that myth and show that the oldest Telerik product continues to get the love and attention it deserves. It receives new functionalities, bug fixes and new controls to allow WebForms developers to have a modern look and feel just like the new products for the recent frameworks.

New Controls

The Telerik UI for ASP.NET AJAX suite was one of the first Telerik products. Over the last 15 years, a lot of controls have been added to it. Now the suite is one of the richest, with more than 100 feature-rich, flexible and performance-optimized components for the rapid development of high-quality, professional looking projects. That shows how mature and complete this product is. Despite that, we continue to enrich the controls portfolio and add new components to make your development even easier and faster.

Here are some examples that confirm my words:

RadChat

Immediate communication on websites is a trend these days. As of the R2 2018 release, ASP.NET AJAX users can leverage a Conversational UI control. You just need to get a bot service, or you can build your own and easily connect it to the RadChat control. It will take care of the visualization and client interaction for you.

RadMultiColumnComboBox

You know how hard it is to show tabular data in ComboBox, the limitations it has and all the custom code you need to write and maintain, right? Not anymore, thanks to the RadMultiColumnComboBox control that can show a grid of data with not a single line of custom code. Yes, that’s true, you need just to configure which columns you need visualized, pass the data source and you are good to go. You have a beautiful looking dropdown representing table data. Check it out in our online demos: Telerik ASP.NET MultiColumnComboBox.

Control Improvements

Themes and Server-Side Events for MultiColumnComboBox

The R2 2019 release gave us a full set of Skins for the MultiColumnComboBox control along with built-in server-side events. Now you can choose from various colors and styles for the control and let it blend in easily with your existing project.

Built-in Confirm Dialog in Telerik Buttons

The HTML confirm dialog is wonderful, it stops the postback execution while prompting. Great! But as you know, the dialog is one of the browser things that you do not have much control over, neither appearance nor functionality and positioning. On top of that, each browser has its own understanding of its appearance.

Luckily, the new built-in confirm dialog in the Telerik buttons allows you to use the RadConfirm dialog to keep the postback from happening until the user confirms it. And all that with just setting a few properties of the buttons, you keep the functionality of the default dialog, but have the appearance and control over the RadConfirm control.

Toolbar for RadChat

You have the Chat in your app, all is working fine, but you need some custom buttons that have specific action, for example, attaching an image in the chat. The new Toolbar feature has got you covered. Check the RadChat Toolbar functionality integration with the AsyncUpload to create the chat image attachment ability: Chat - Toolbar

GenerateXlsxOutput Method for RadGrid

The RadGrid has its “Export to Excel” button, you click it and an Excel file starts downloading. Perfect! But what happens when you need to export multiple grids to the same file? Easy – use the new GenerateXlsxOutput() method to get the exported content for the grid and combine it with the content of the other grids. Here is the Grid - Export Multiple Grids online demo that shows how easy it is to implement.

Latest Internal Builds are Available Once Again

The Latest Internal Build, also know as LIB or Nightly Build, contains some bug fixes for the latest official release. It is useful in development environments to test some fixes addressing issues in the official release. If you want to to download it and review the release notes for that, you can check out the Latest Internal Builds knowledge base article.

Knowledge Sharing and Public Resources

Our company culture encourages collaboration and sharing knowledge among colleagues. We are taking this to the next level, and we share our knowledge and best practices with our developer community in the support threads or by creating public resources. For example, if we encounter the same scenario reported from two different people, we aim to create a publicly available Knowledge Base article or a Code Library project with the solution and the explanations.

Here are just a few examples, showing that we are also sharing general knowledge resources, unrelated to our controls.

Periodically we post the new articles in the Latest Online Resource sticky note in our forums. Logged in users have the option to subscribe to this thread and get an email notification for every post in the thread we create.

Another great way for us to share useful info is here on the Telerik blogs. Here are some of the recently created ones that you may want to check out.

What to Look Forward to in R3 2019

In just weeks, the R3 release will be a fact and you can have it in your hands. Its focus is on Accessibility but it will also bring more fixes, new features and a brand-new control – the long awaited RadDrawer.

You are excited, aren’t you? Follow the What’s New and the Release History pages for more information when the release is officially live.

If you're new to Telerik UI for ASP.NET AJAX, be sure to check out the latest version today with a free 30 day trial.

Compliance with web accessibility requirements is good for many reasons—not least of which is potential legal considerations. If you're wondering how to begin with accessibility, here are some tips to get you started.

It’s a day like any other when you open your email or pick up the phone to a real day-ruiner from the legal department: Your organization is being sued because your site or web application doesn’t comply with accessibility guidelines, most commonly WCAG Level AA standards. The only way to protect yourself and your company from legal action? Get to work on making your site or app compliant. Now.

Accessibility Is No Longer Something You Can Ignore

If this hasn’t happened to you yet, it’s only a matter of time. Accessibility compliance is no longer restricted to public agencies and financial institutions. Law firms are working down a very long, industry-specific list. You’re on it somewhere.

This isn’t just a legal headache, of course. Improving the accessibility of our sites and apps is a worthy and excellent goal. After all, everyone deserves a good user experience. But under the stress and deadline of legal repercussions, the undertaking can seem completely overwhelming.

Pro Tips for Accessibility Beginners

Don’t worry. We’ll get you started. If you absorb these pro tips, you’ll have a much better idea of how to make your site or app accessible for all.

1. Don’t Rely on the Lawyers’ Scans

The lawyer sending you compliance nastygrams knows just about as much about accessibility as you do. (Fun fact: Dollars to donuts, their website isn’t compliant either.) Overzealous lawyers will be quick to point out items that aren’t issues, and they may miss things that actually do hurt accessibility.

Pro Tip
Get your own scanner and run your own scan. You don’t have to spend a fortune. At truematter, we use Powermapper Accessibility Checker and Validator. It does a good job for a reasonable price.

2. Prepare for a Lot of Gray Area

Getting a scanner and running a scan is the easy part. The trick is interpreting your scan. Don’t expect a simple checklist where you can mark each item pass or fail. Accessibility guidelines are often open-ended and sometimes confusing. You’ll have to make decisions about the best way to resolve issues. The more extensive and complex your site or app, the more of these tough decisions you’ll have to make.

For example, let’s say you have a PDF printout that contains the same content that can be found on your site. The on-screen content is compliant, but you still fail a guideline because the PDF is not accessible. What do you do with that PDF? Make it compliant? Hide it from screen readers? Omit it? Change your content strategy so you never use a PDF again? These are tough questions. You need expert advice to be sure you’re satisfying accessibility standards without hurting overall usability.

Pro Tip
Find an accessibility expert to help you interpret findings and guide you through the tough issues. You can cultivate in-house accessibility expertise, but that will take quite a while. If you’re looking at a lawsuit, hire an expert now and build internal skills later.

3. Don’t Sacrifice Usability

Some accessibility guidelines can lead the inexperienced to make decisions that fly in the face of good overall UX. It’s no good to fix your site or app for a certain percentage of people only to hurt the experience for the majority of users. Always focus on what makes the best experience for everyone, not on what merely passes a generic scan.

You may have to significantly change content, functionality, or overall strategy to maintain balance between accessibility compliance and overall user experience.

Pro Tip
Involve a UX expert. They will evaluate whether your proposed accessibility solutions will hurt overall user experience and come up with strategies to ensure ease-of-use for everyone.

4. Real People are the Best Judges

Software is just a starting point. We don’t judge usability exclusively with bots, and neither should we judge accessibility exclusively with software

Pro Tip
Run a scan, then test your digital product with real people. Only a person with limited vision can evaluate user experience for people with limited vision. Test your solutions with real people, and you will learn more than any software product can tell you.

5. Be Aware of Common Problem Areas

You will encounter many accessibility issues specific to your digital product and your digital product. But you can prepare for certain accessibility problems that affect almost every site or app. In fact, you can get started fixing these issues before you ever run your first scan.

Alternative Text

For your digital product to pass an accessibility scan, every image must have alternative, or alt, text.

If an image is purely decorative and doesn’t contribute to information on the screen, your alt text should simply be left blank.

Screen shot of sun icon in an image editor with the “Alt Text” field highlighted and blank

Empty Alt Text: This sun icon doesn’t add information the user can’t get another way on the screen. The “Alt Text” field, therefore, is blank.

In code, this would look like:

<imgsrc="/theImage.jpg"alt=""/>

This tells screen readers to skip the image as not important. On the other hand, if the image provides information you can’t get through words on the screen, you’ll need to write descriptive alt text that clearly explains what the image is communicating.

Let’s say your screen is about a new dog park. One image shows people sitting at a table in the park that’s mentioned in the written content. That image would have empty alt text, because it’s not adding new information that low vision users or blind users couldn’t get another way. But let’s say you have another image that shows dogs getting treats at the park’s concession stand. Your written content never mentions that dog treats are for sale at the park. You’ll need to write alt text for the image that says something like “Dogs getting treats for sale at the park concession counter.” People with low vision or blind people won’t be able to get that information any other way. (Alternatively, you could add that information to your written content and skip the alt text—just another one of those tough decisions we mentioned earlier.)

Watch out, you can annoy your user with too much or too little information, same as any other online text. It’s crucial to consider context, brevity, and your users’ tasks as you write alt text. Your UX expert can help you with this too.

Pro Tip
We could talk about alt text for an entire article. Fortunately, WebAim already did and it’s super useful. We like this list of quick tips from The A11Y Project too. Bookmark both and reference them often.

Color Contrast

WCAG level AA guidelines specify that text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). This also means that link color must stand out distinctly from regular text. It’s very likely that the text on your site or app utterly fails color contrast guidelines. You can check it out right now. Once again, WebAim comes to the rescue with their Contrast Color Checker.

Pro Tip
Be prepared to fudge on your brand colors. This might make your marketing team angry. Believe us, no one will know that you had to use a blue two shades off from your brand standard for accessibility compliance. But the accessibility scan and users with limited vision or color blindness will know if you don’t do it.

Link Text

This guideline actually warms our content team’s heart. Your button and link text must say specifically where a given link goes. Chuck “Read More” and “Click Here” right out the window. When link text is vague, it’s hard for someone using a screen reader to know where exactly they’re going. (Heck, it’s hard for everyone else too.

Pro Tip
All links should be concise and descriptive. Tell users precisely where links go and what they do. This doesn’t give you license to create nine-word buttons. If you’re doing that, you have entirely separate content strategy problems.

PDF Accessibility

Surprise! Any PDFs on your site or app must be accessible too. Forewarned is forearmed: Making PDFs accessible is not easy. Set time aside to deal with this issue – you’ll be glad you did.

So how do you make a PDF accessible? There’s a lot to it (and your accessibility expert will help you) but here are some things you should know right away:

You need Adobe Acrobat Pro. It will be your best friend. The accessibility tools the software provides will allow you to make any PDF accessible and test for accessibility. Adobe offers strong resources for both. In fact, if you have Acrobat now, you can check your PDFs with their Accessibility Checker

Start at the source. Making a PDF accessible after it’s been created is much harder than making it accessible from the beginning. The latest version of Adobe InDesign and Microsoft Word have accessibility features to help you as you create your document.

Be cautious when using the “Make Accessible” Action Wizard in Acrobat. It will do most if not all of the work for you, but you still need to manually review things like color contrast, reading order, and tags for accuracy.

Pro Tip
Keep your PDFs simple. The more images, charts, and interactive form elements you have, the more hassle it will be to make your PDF accessible. If that content is truly important, put it on your site. It’s much easier to make a web page accessible than a PDF.

6. Document Everything

Because guidelines and their solutions can often fall into those pesky gray areas, write down all your decisions and reasoning behind them. If you ever need to present your rationale to a lawyer or judge, you’ll be ready to go. And bonus – if you ever need to solve a similar problem again, you can refer to your documentation to figure out what you did and why you did it. You are essentially creating accessibility governance guidelines.

Pro Tip
Always cite the specific WCAG guideline when documenting your solution. Not only will this make internal reference far easier, it will also make things convenient for the aggressive lawyers in your life.

7. Stay on Top of it

Making your site or app accessible is just the start. You now have to keep your site or app accessible, and that means vigilance. Scan your product regularly and fix problems as they arise. Incorporate the WCAG accessibility standards into every digital product project you build from here on out.

Pro Tip
Schedule a quarterly internal accessibility audit. This is essential to keeping your site or app user-friendly for everyone (and keeping lawyers at bay).

8. Train Your Maintenance Team

Nothing will sink your compliance faster than releasing your site or app to content authors and maintenance professionals with no understanding of accessibility guidelines or your commitment to them. You must build internal accessibility awareness and enforce your newfound standards.

Pro Tip
Add accessibility to internal maintenance training programs, documentation, and governance guidelines. If you don’t have any of these, now is the time to create them.

Build With Accessibility In Mind

Accessible digital products are long past due. Moving forward, make sure you never have to go through the cost and frustration of a full accessibility remediation again. Instead, define and design your digital products to comply with accessibility standards from the very beginning.

You’ll need regular input from both accessibility and user experience experts (either internal or external). This means your process and documentation must change. But fear not, the added time and budget this requires will more than pay for itself in much-improved digital products and happier customers.

You’ll also know you’re serving all customers excellently – a solid business benefit, and a show of proper good will and respect.

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper:Accessibility for Developers

Adding Accessibility to Your Apps

Learn more about: Kendo UI

Web accessibility can be a complex topic for new and experienced web developers. Here are six questions (and answers) to some of the most important web accessibility questions.

Accessibility has rapidly grown from an afterthought at best to a major concern for developers. It’s being driven by a combination of the creation and enforcement of accessibility laws, a growing awareness of the accessibility needs of the web user community, and the fact that providing accessibility to those with disabilities is good for business. In this post we’ll answer six questions about accessibility to help define what it really means and if you should be concerned about it.

1. What is Accessibility and Why Should You Care?

The convenience of conducting life over the web from shopping and sharing to banking and business is a timesaver for most, but what if you are not able to use the web? And just like ramps on the sidewalk and braille on elevator buttons have made physical movement easier for those with disabilities, so too have accessibility efforts made the web usable for those who are not able to surf the web in the same way the rest of us do.

Do we really need to worry about a handful of people with disabilities that may be unable to use our app when we are under so much pressure to get it done? There are three reasons the answer to that question is YES. First is basic human consideration for those who have more difficulty navigating life. Second, there are more than 56 million people alone in the US that have some form of disability—so it’s good for business. And third, it’s the law. Did you know that in 2018 more than 2,200 federal lawsuits were filed in the US for web accessibility violations that fall under the Americans with Disabilities Act?

2. What Exactly Defines a Disability?

There are five primary types of disabilities to consider:

Physical– poor or no motor function
Hearing– deaf or hard of hearing
Visual – low-vision, blind, color blind
Cognitive– dyslexia, autism, ADHD, etc.
Speech– unable to speak or have a speech impediment

Additionally, we need to consider combinations of disabilities, which can create even greater accessibility challenges.

3. What Specific Laws have been Enacted Regarding Accessibility?

As the web has evolved from a useful, mostly static nice-to-have tool to one that is essential to life in the form of online banking, education and government services just to name a few, regulations have evolved along with it. Going back to the 1980s, laws and guidelines have been put in place by worldwide organizations like the United Nations as well as individual governments and even industries.

On a global level, back in 1982 the United Nations created the World Program for Action, a global strategy to enhance disability prevention, rehabilitation and the equalization of opportunities. That was followed by The Standard Rules on the Equalization of Opportunities for Persons with Disabilities, adopted by the UN in 1993, which specifically added that the member states’ action programs should include, “Support for the use of new technologies and the development and production of assistive devices, tools and equipment and measures to facilitate access to such devices and equipment for persons with disabilities to enable them to gain and maintain employment.”

In addition, standards organizations like the World Wide Web Consortium list 40 countries that have adopted governmental policies related to web accessibility. Those include the UK with its Equality Act of 2010, and the US with the Americans with Disabilities Act, the 21st Century Communications and Video Accessibility Act of 2010, and the all-important Section 508 of the Rehabilitation Act which requires federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.

Although standards can vary from country to country, many have standardized around the Web Content Accessibility Guidelines (WCAG). The WCAG has been approved as an international standard by the International Organization for Standardization (ISO) and the International Electrotechnical Commission (IEC). In the long run, if you are WCAG compliant you should be in good shape.

And with laws, come enforcement. According to a search of court cases conducted by Minh N. Vu, Kristina M. Launey & Susan Ryan of law firm Seyfarth & Shaw, the number of lawsuits concerning website accessibility nearly tripled from 2017 to 2018 and hit a total of 2,258 cases. Some of these cases have received public attention as well and highlight the growing need to adhere to accessibility standards.

4. What is the Role of Assistive Technologies?

Assistive technologies are defined as equipment or a type of product designed to improve or maintain the functional capabilities of people with disabilities. There are various assistive technologies available, including tools like adapted pencil grips and automatic page turners; and cognitive aids, such as electrical assistive devices, created to help memory skills.

In terms of web accessibility, assistive technologies can be used to help ensure the individual is able to leverage the internet and any web-related content. Some examples include:

A mouth stick: A simple device that users can manipulate with their mouths to type or control a mouse
A head wand: A simple device strapped to the user’s head that enables them to type, navigate and otherwise maintain control over web services
Oversized trackball mouse: A device that lets users move their cursor easily, despite any fine motor movement limitations
Adaptive keyboard: A popular technology featuring raised areas in between keys to help slide the finger into the correct key
Voice recognition software: Software that enables users to control web services with simple voice commands

There are also a number of application-specific tools that function as assistive technology. A good example is the Xbox Adaptive Controller from Microsoft for gamers.

5. What are Digital Accessibility Requirements?

Digital Accessibility Requirements (or Guidelines) are part of a series of guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium. They fall into four major principles that define what the content on your site or app must be in order to be usable for those with disabilities:

The guidelines can be challenging, vague at times and require expertise to implement. Requirements and guidelines range from color contrast, alt text, page structure, focus states, forms, PDFs and more.

Perceivable: Is the information presented in a way that people can access and perceive it with at least one of their senses?
Operable: Can users navigate and find content, and can people use your interface without a mouse? Are they given plenty of time to complete tasks and read content? Is the content safe from causing a seizure or physical reaction?
Understandable: Can people understand both your information and how to operate your interface, no matter how they’re accessing your content?
Robust: Can all kinds of user agents and assistive technologies interpret your interface for those using it? Will you evolve your content as assistive technology evolves to ensure new technologies can interpret it for those trying to access it?

6. What is the Best Way to Test for Compliance?

Web accessibility testing is fundamental to ensuring people with disabilities are able to use your website without barriers. There are both manual methods and automated testing tools available to help bring your site into accessibility compliance.

Manual testing involves having human testers perform a range of tests to ensure the website is actually usable for individuals with disabilities. Similar to any type of editing or quality assurance, you’re able to get an entirely new viewpoint with each person who performs manual testing.

Automated testing is the process of using software tools designed to find accessibility issues. These tools have evolved quite a bit over the past few years, so it’s no longer difficult to find a range of tools available to help you adhere to accessibility guidelines. In fact, there are browser extensions, command-line tools and much more. These tools should be used at the beginning of the design process and periodically throughout to catch issues before they go into production.

Best practices dictate using both.

Next Steps

In this post we have only scratched the surface of accessibility. It should be considered an ongoing effort of continuous improvement. It is one of those areas where we get an intersection of “things you have to do” and “things you can feel good about doing.” By helping to gain a better understanding of how accessibility works, you will hopefully keep these techniques in mind when working on your next app. You’ll wind up with a better app, generally increased usability overall and a satisfied user community, now that a larger portion can use your app.

For an in depth look at the topics we covered and much more, download a copy of our whitepaper, Accessibility for Web Developers. It also includes numerous links to helpful resources to get you on your way.

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper:Accessibility for Developers

Adding Accessibility to Your Apps

Learn more about: Kendo UI

The third Telerik and Kendo UI release of the year has just arrived! Catch up on everything that’s new – there’s a lot!

With the Telerik and Kendo UI controls and tools, our mission is to make the life of software developers easier, so they can build and deliver their web, mobile and desktop applications faster, feature rich and with lovely UI and UX that is pleasing to the end users of the applications. In this journey, we are staying ahead of the curve and evaluating new technologies all the time, before they become widely adopted, so we can have the right tools for .NET developers to build apps, even before they need them.

With the Telerik R3 2019 release, you will be better equipped to continue doing just that – we are so proud to release the all-new Telerik UI for Blazor packed with more than 25 brand-new native components!

In addition, we are happy to announce that our component .NET toolsets are fully compliant with the upcoming .NET Core 3.0 (RC) and are coming with tons of new controls and improvements.

Read on for more details, and for those of you who just want to get the bits right away, you can get them here.

First on the Market with Telerik UI for Blazor with over 25 Components and the Exclusive Support of Microsoft

We are very proud for being one of the first teams to throw our support behind this new Microsoft framework. Now, after several releases, lots of feedback from Blazor fans, and huge steps for the Blazor framework itself, we are happy to announce that Telerik UI for Blazor 1.6.0 is here!

With this new version our offering is expanding and now we offer 25+ native components for building web applications with Blazor – Grid, Charts, DropDownList, Inputs, Data Inputs, Layout, TreeView, Styling and more.

Only 4 months ago with the initial release of Telerik UI for Blazor we had the following UI components ready for you right out of the box:

· Button

· Calendar

· Charts – Area, Column, Bar, Line, Pie, Donut

· Date Input

· Date Picker

· DropDownList

· Grid

· Numeric Textbox

· TabStrip

· TextBox

· Window

· Animation Container

With the new release we are introducing a slew of new components:

· TreeView

· Menu

· DateTimePicker

· TimePicker

· Grouping

· FilterMenu

· Hierarchical Grid

· Selection (single/multimple)

· API Reference

With this solid list you can easily start developing pretty advanced applications using Telerik UI for Blazor.

There’s just so much to showcase in the new Telerik UI for Blazor, so if you want to deep dive into it you can easily do it now. If you’ve already been using Telerik UI for Blazor in its earlier iterations you can go over to our What’s New in Telerik UI for Blazor page.

What’s New in the Telerik Line of Products

The R3 2019 release formalizes our support for .NET Core 3.0 (Release candidate) in all our installers and brings a bunch of new controls for your web, mobile and desktop applications. Below are our Telerik release highlights. Make sure you check out the release notes for each product to learn about everything that is included.

Web – Telerik UI for ASP.NET Core, MVC and Ajax

· Official support for .NET Core 3.0 (RC)

· New components and accessibility improvements in ASP.NET Core and ASP.NET MVC - TimeLine, Filter andRating controls, more features to the recently introduced PdfViewer control and a slew of Document Processing Libraries for creation of Word, Pdf and Spreadsheet documents – WordsProcessing, PdfProcessing and SpreadStreamProcessing

· New Drawer component, Spreadsheet enhancements and Accessibility improvements in ASP.NET AJAX

Mobile — Telerik UI for Xamarin

· New .NET Standard WordsProcessing library – generate and modify docx, rtf, html or pdf documents right in your app or on the server

· Calendar enhanced scheduling capabilities - restricted and special slots support, enhanced scroll into view APIs and appointment customization capabilities

· ImageEditor improvements – new cropping and sizing options land in the newest Xamarin component

· PdfViewer gets selection and link annotation support

Desktop — Telerik UI for WPF and WinForms

· Official support for .NET Core 3.0 (RC) and design time support for WPF

· Visual Studio 2019 theme, New Syntax Editor control, FilePathPicker control and SwitchButton control for WPF

· New WebCam control and Sparkline control for WinForms

Reporting, Testing & Productivity Tools

· Optimized performance of data source component to maximize the use of data by caching and re-usage of all shared data sources in the report for Reporting and Report Server

· Flexible parameters and document map areas positioningfor the Web-based report viewer controls to ensure the best UX to end users for Reporting

· Web-based report designer that will enable basic reports editing without leaving the Report Server web app

· Mock generics with NonPublic API and future mocking of NonPublic classes for JustMock

· Visual Studio 2019 support for Telerik Test Studio Dev Edition

What’s New in the Kendo UI Line of Products

The R3 2019 release is adding support for Angular 8 and many new Kendo UI controls and numerous grid improvements, rounding out Kendo UI’s native support for three of the most popular JavaScript frameworks (React, Angular and Vue).

KendoReact

· New Component: TreeList

· New Component: Scheduler

· New Component: ColorPicker

· New Component: ColorGradient

· New Component: ColorPalette

· New Component: Pager

· Roadmap for KendoReact

Kendo UI for Angular

· Support for Angular 8 – first official release

· New Component: ProgressBar

· New Component: Drawer component

· New Component: DateTimePicker

· Scheduler RTM (update from previous beta release)

· Grid enhancements: column virtualization and new group header options

· Component Improvement: Responsive Toolbar

· Continued Improvements to the Editor

· Roadmap for Angular

Kendo UI for jQuery

· New Component: Filter Widget

· New Component: Timeline Widget

· New Component: Rating Widget

· PDF Viewer Updates

· DataSource Updates

· Roadmap for jQuery

You can find more on this at the Kendo UI Release blogpost.

R3 2019 Release Blog Posts

While this blog post provides a high-level overview, you will want to check out these in-depth blog posts which cover all new features in detail.

Sign Up for the Release Webinars

Seeing is believing, so register to see all the new features – WEBINARS ARE COMING UP FAST! It will help you to follow along easily if you download the latest release here.

Web—Telerik UI for Blazor, ASP.NET Core, MVC and AJAX

October 2, 2019 @11:00 a.m. – 11:45 a.m. ET

Desktop—Telerik UI for WPF and WinForms; Mobile – Telerik UI for Xamarin; Reporting, Testing & Productivity Tools

October 2, 2019 @11:45 a.m. ET – 12:30 p.m. ET

Kendo UI for Angular

October 8, 2019 @11:00 a.m. – 11:30 a.m. ET

Kendo UI for jQuery

October 8, 2019 @11:30 a.m. – 12:00 p.m. ET

KendoReact

October 8, 2019 @12:00 p.m. – 12:30 p.m. ET

[

Get the details on the latest release of Telerik UI for Blazor including the Blazor Grid Hierarchy and DataTimePicker controls, compatibility with ASP.NET Core 3.0 RC and other important changes.

As Blazor technology is rapidly evolving, so is our suite of Telerik UI for Blazor controls. It's been just a few months since the first release, but we are already happy to provide you the top 22 (and counting!) native Blazor components. In this blog post, we want to share with you what’s included in the new 2.0.0 release – just a week before the official release of Blazor by Microsoft. Read on to find out more about Blazor Grid Hierarchy, DataTimePicker, compatibility with ASP.NET Core 3.0 RC and some important changes.

Blazing Fast Compatibility with ASP.NET Core 3.0 Release Candidate!

The official Release Candidate of ASP.NET Core 3.0 is here and Telerik UI for Blazor is not only getting bigger, but also stronger. We are now fully compatible with all RC updates published by Microsoft.

Breaking Changes

We aimed to simplify your work and increase the usability of the components so with the 2.0.0 release we are introducing the following amendments:

Namespace change– all components are now moved into a single namespace - Telerik.Blazor.Components, and all common classes, such as enums, in the Telerik.Blazor namespace. To make you coding easier, you longer need to declare a separate namespace for each Component used in your page - just include @using Telerik.Blazor and @using Telerik.Blazor.Components in the ~/_Imports.razor file.
Change of inner tag names - the root-level components keep their names following the convention <TelerikComponentName>, and, for brevity, the Telerikprefix is removed from all child tags.
Collections and state manipulation - some methods that manipulated collections or state are now gone. The way to alter collections is to use conditional markup and loop over collections from a view model. To alter state, use parameter binding.

For further details and demo code examples, refer to the article Breaking Changes in Telerik UI for Blazor 2.0.0.

New Blazor Grid Hierarchy

As the Blazor Grid component has been the first or most requested item by our customers and adopters, we are placing effort to regularly take into consideration your feedback and roll it into our in the component.

With the 2.0.0 release data no longer has to be flat, as we are introducing Blazor Grid Hierarchy– now you can organize your records into a parent-child relationship structure and make use of the master - detail templates.

@page "/grid/hierarchy"

<h4>Hierarchy</h4>

<TelerikGrid Data="@GridData"

Height="550px"

Pageable="true"

PageSize="10"

Sortable="true"

>

<GridColumns>

<GridColumn Field=@nameof(Product.ProductName) Title="Product Name"/>

<GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price"/>

<GridColumn Field=@nameof(Product.UnitsInStock) Title="Units in stock"/>

<GridColumn Field=@nameof(Product.CreatedAt) Title="Date created"/>

<GridColumn Field=@nameof(Product.Discontinued) Title="Discontinued"Width="150px"/>

</GridColumns>

<DetailTemplate>

@{

var product = context asProduct;

<TelerikGrid Data="@product.OrderDetails"

Height="300px"

Pageable="true"

Sortable="true"

PageSize="5">

<GridColumns>

<GridColumn Field=@nameof(OrderDetails.OrderId) Title="Order ID"/>

<GridColumn Field=@nameof(OrderDetails.UnitPrice) Title="Price"/>

<GridColumn Field=@nameof(OrderDetails.Discount) Title="Discount">

<Template Context="order">

@(String.Format("{0:P2}", (order asOrderDetails).Discount))

</Template>

</GridColumn>

<GridColumn Field=@nameof(OrderDetails.Quantity) Title="Quantity"/>

</GridColumns>

</TelerikGrid>

}

</DetailTemplate>

</TelerikGrid>

In the <DetailTemplate>, you can access the model for the row through the context, apply custom formatting of data or use other components to visualize related detailed data. The example below uses in its <DetailTemplate> another <TelerikGrid Data="@product.OrderDetails"> component for showing detailed data related to each main record in the master grid <TelerikGrid Data="@GridData">.

Telerik UI for Blazor Grid Hierarchy

When you define a detail template, users can expand and collapse the detailed data via a button that is rendered at the beginning of each row.

New Blazor Component: DateTimePicker

A couple of weeks ago we introduced with the 1.6.0 release the Blazor TimePicker component, and with the current 2.0.0 release we are adding DateTimePicker.
Telerik UI for Blazor DateTimePicker Component

To use the Telerik DataTimePicker simply add the <TelerikDateTimePicker> tag and bind it to data:

<TelerikDateTimePicker@bind-Value="@DateTime.Now"></TelerikDateTimePicker>

As with the rest of our date and time controls, the Telerik DateTimePicker for Blazor has multiple other configuration properties so that you can adapt the usage of the component such as: formatting of values, Min, Max, Value and Width.

If you need to perform validation you can make use of the seamless support and integration with Blazor's Forms and Validation valid for all our input control. More on Telerik UI for Blazor components validation can be found in the article here.

Blazor Keynote at BASTA Conference

We are excited to invite you to an exciting keynote speech by our Manager of Software Engineering Pavlina Hadzhieva Goodbye, Client-side JavaScript – Hello, Blazor at BASTA conference.

Come meet us at the Progress Telerik Booth to chat about the future of Blazor and take part in our “Code for Charity” game.

Download Telerik UI for Blazor 2.0.0

We encourage you to visit the Telerik UI for Blazor overview page and download the Telerik suite of 25+ native Blazor components! We are continuously working on expanding the Blazor demos and enriching the documentation, so that you have a smooth experience.

Share Your Feedback!

Happy Blazor coding!

We're excited to announce the R3 2019 release of Telerik UI for ASP.NET MVC. Here's a look at the new components and enhancements.

The R3 2019 release of Telerik UI for ASP.NET MVC is here! Find out more about the latest new components added to our offering: Timeline, Filter, Rating and Card. We will also reveal details to new features like Search Panel in the Grid and enhancements related to PDFViewer, accessibility and localization.

New ASP.NET MVC Component Rating

One of the highlights of R3 2019 release is the new the Rating component.

Telerik UI for ASP.NET MVC Rating Component

The component can be adapted to your app requirements through the large number of configuration options related to rendering and behavior. You are armed with setting a rating scale (including handling avg. values), applying custom icons (stars, hearts, circles or anything your users may prefer), single and continuous selection of items, keyboard navigation, accessibility.

Telerik UI for ASP.NET MVC Rating Half-Precision

Telerik UI for ASP.NET MVC Rating Component - Half Precision

New ASP.NET MVC Component Timeline

The Timeline is a visually rich component that will enable you to present events in your applications in an interactive and stylish way.

Telerik UI for ASP.NET MVC Timeline Component Telerik UI for ASP.NET MVC - Horizontal Timeline Component

Depending on your app scenario you can set the Timeline component to horizontal or vertical layout and present the events in a short collapsed or expanded detailed mode. In addition, you can apply customizations related to content, images, text, colors and fonts to each time event.

Telerik UI for ASP.NET MVC Timeline Component Telerik UI for ASP.NET MVC - Vertical Timeline Telerik UI for ASP.NET MVC - Vertical Timeline Component

New ASP.NET MVC Component Filter

Building complex queries for data bound controls has never been easier. With the new Filter component, you will enable your users to visually define multiple criteria for selecting the right data by simply adding new logical operators, filter criteria and specific values.

Telerik UI for ASP.NET MVC Filter Component with ListView

New ASP.NET MVC Component Card

The new MVC Card component will give you flexibility when defining content containers. A card can consist of a header, body and actions and can also accommodate images, lists, groups, separators and more. Cards can be useful for displaying a mix of content in a grouped way in analytical dashboards, blogs, e-commerce and for achieving more advanced masonry-like layouts.

Telerik UI for ASP.NET MVC Card Component

Enhancing the ASP.NET MVC Grid

Your favorite Grid component is now enriched with a built-in Search Panel to enable effortless search and location of records in large volumes of data. The Search Panel allows configuration of which grid fields to be searchable and places a search text box inside the grid toolbar.

Telerik UI for ASP.NET MVC - Grid Search Panel

PDFViewer Enhancements

In R2 2019, the Telerik UI for MVC Team released a new PDFViewer component that allows users to view and interact with PDF files in the browser. In R3 2019 we added a number of features requested by our community: zoom and scale functionality along with FitToWidth / FitToPage, search within the document, print functionality and panning and text selection.

Telerik UI for ASP.NET MVC PDF Viewer

Telerik UI for ASP.NET MVC PDFViewer Enhancements

Accessibility Improvements

In R3 2019 we continued our efforts towards ensuring Telerik UI for ASP.NET MVC components conform to the technical standards implied by WAI-ARIA, WCAG 2.1, and Section 508 and we worked towards improving the accessibility in the Grid, Editor, and MultiColumnComboBox.

More on the importance of Accessibility can be found in the whitepaper we published earlier this year.

Localization Enhancements

To cover application scenarios where multiple languages are used, we have implemented a configurable option to localize the messages in the following components: AutoComplete, ComboBox, DropDownList, MultiSelect, MultiColumnComboBox .

Try it Out and Learn More at the Webinar

Download the latest version of Telerik UI for ASP.NET MVC, try it out and let us know what you think on our feedback portal. Be sure to sign up for the Telerik R3 2019 release webinar on October 2 for a deeper look at all the new features in the release.

RESERVE YOUR SEAT

R3 2019 of Telerik UI for Xamarin is here and it brings a brand new library for manipulating documents as well as a number of improvements in RadCalendar, RadPdfViewer and RadImageEditor.

With this release we continue our journey in delivering high-quality, feature-rich components for your mobile applications This time we are adding the WordsProcessing component to the suite and enriching the Calendar, PDFViewer and ImageEditor controls with popular features. Let’s have a look.

WordsProcessing

With R3 2019 we have added the ability to create and export documents right within your mobile app. RadWordsProcessing is a document processing library that allows you to create, modify and export documents in several formats: PDF, docx, RTF, HTML, and plain text. It allows you to import any of these and convert to any of them upon exporting. The library supports sections (e.g. header, footer, watermark), paragraphs and the ability to change their appearance, as well as tables. The supported functionalities include Mail Merge, Merge documents, Import separate element, Clone documents or elements, Find and Replace. All these, combined with the rich formatting capabilities of the library turn RadWordsProcessing into a powerful tool for creating and manipulating documents on the end-user mobile device.
Telerik UI for Xamarin WordsProcessing

RadCalendar

This release brings the long-awaited Appointment templates in Telerik UI for Xamarin Calendar. Now you can customize calendar appointments in day view and multi-day view, so that they look exactly as they should. Use a DataTemplate or TemplateSelector to define a static or dynamic look of the appointments. Find out more about Appointment Templates in our RadCalendar online documentation.

This release also adds Special Slots to the calendar day view and multi-day view. RadCalendar exposes a property SpecialSlotsSourceaccepting a collection of SpecialSlot objects. This object contains start date, end date, recurrence pattern, and a flag if it is a read-only slot. This is a powerful mechanism to designate certain time slots for special treatment—set as read-only, assign special appearance - background or custom template, etc. The SpecialSlotStyleSelector and SpecialSlotContentTemplate properties make it possible to customize the appearance in a well-known fashion. Find out more about it in our Special and Restricted Slots help topic.

calendar_special_slots

Another addition to RadCalendar is the new ScrollTimeIntoView method. It comes in super-handy when you need to scroll directly to the time you want your users to focus on, rather than displaying the DeyView/MultiDayView from the very beginning at 0:00.

RadPdfViewer

After all the updates introduced with R2 2019, now we are adding selection and link annotations to the Xamarin PdfViewer. Just tap and hold on a word. It will become selected and two cute fluffy handles will appear for you to manipulate the selection.

The API allows you to fine-tune the appearance, including setting the template of the selection menu with arbitrary content. A command exposed by the selection menu items allows you to act upon user interaction. You can learn more about Selection and find an example of handling the command in the Text Selection help topic.

With R3 2019, we have also included support for link annotations. Link annotations are two types – ones that point to URI – popular hyperlinks -- and ones that point to a location within the document – often found in the table of contents. Both are handled with RadPdfViewer – the former executing Device.OpenUri to navigate (usually outside the app) in a platform-appropriate manner to the corresponding URI, and the latter navigating within RadPdfViewer to the designated document destination.

Image Editor

With this release, we have enhanced the Xamarin Image Editor with a couple of handy features. We have exposed the API for saving the image with a specific scale factor or with a maximum size, thus allowing you to handle large images, but saving them to a size which corresponds with your app needs.

We have also added circular and fixed-ratio crop, including some pre-defined ones -- the most popular crop ratios like 3:2, 4:3 and 16:9. The control also features a unique, easy-to-use, intelligent crop switch, depending on the touch location. Whenever the touch location defines a rectangle with swapped width/height ratio, the resize adorner will switch, so you automatically get the alternative crop rectangle, thus quickly and easily switching from landscape to portrait crop and vice-versa.

Image Editor Crop

Save Your Webinar Seat

To learn more about everything new in Telerik UI for Xamarin, please join our online webinar on October 2, 11:45 am ET. Registration is available here https://www.telerik.com/campaigns/telerik-r3-2019-release-webinar

Share Your Feedback

Feel free to drop us a comment below sharing your thoughts. Or visit our Feedback portal about Telerik UI for Xamarin and let us know if you have any suggestions or if you need any particular features/controls.

And if you haven’t already had a chance to try our UI toolkits, simply download a trial from the link below:

UI for Xamarin

We're excited to announce what's new in Telerik UI for ASP.NET Core. Read on to learn about all about the new components and enhancements.

The third major version of Telerik UI for ASP.NET Core for 2019 is here and it is compatible with the official ASP.NET Core 3.0 Release Candidate! Check out the new components: Timeline, Filter,Rating, Card and Diagram and the Telerik Document Processing Library. In R3, you'll also find new features and multiple enhancements related to Search Panel in the Grid, PDFViewer, localization, accessibility and available online resources.

Support for ASP.NET Core 3.0 Release Candidate

The first exciting news that we want to announce is that the Telerik UI for ASP.NET Core components are now compatible with ASP.NET Core 3.0 Release Candidate. This ensures that those of you who are eager for the official release of ASP.NET Core 3.0 later this month are ready to incorporate the latest release of Telerik components into your projects.

New ASP.NET Core Component Timeline

The new Timeline component will enable you to visualize time events in your applications in an interactive and captivating style.

As with all Telerik UI for ASP.NET components the Timeline control can be integrated in your pages using both HTML and TAG Helpers.

Adding the following code using Tag Helper:

<kendo-timelinename="timeline"orientation="horizontal"datadatefield="EventDate"datatitlefield="Title"datasubtitlefield="Subtitle"datadescriptionfield="Description"dataactionsfield="Actions"dataimagesfield="Images">

<datasource>

<transport>

<readurl="/Timeline/GetEvents"/>

</transport>

<schema>

<model>

<fields>

<fieldname="EventDate"type="date"></field>

</fields>

</model>

</schema>

</datasource>

</kendo-timeline>

Produces this beautiful result:

Telerik UI for ASP.NET Core Timeline Component

In this example, the Timeline events are displayed in a horizontal orientation with events laid out along a horizontal time axis. However, you can easily configure the layout to a vertical orientation with events displayed along a vertical time axis. Each of the events can be expanded with its detailed content or collapsed, and we have ensured each event item to have intuitive customizations in terms of content, images, text, colors and fonts.

New ASP.NET Core Component Rating

The new Rating component exposes multiple customization options for rendering and behavior to suit any scenario in your application:

Custom icons – from classical stars to a more sophisticated svg icons
Rating scale (including handling avg. values)
Custom labels and tooltips
Templates
Accessibility, keyboard navigation and RTL Support

Telerik UI for ASP.NET Core Rating Component

Telerik UI for ASP.NET Core Rating Component

Adding the following code using HTML helper:

@(Html.Kendo().Rating()

.Name("rating")

.Min(1)

.Max(6)

.Value(3)

.ItemTemplate("<i class='k-icon k-i-heart-outline'></i>")

.SelectedTemplate("<i class='k-icon k-i-heart'></i>")

.HoveredTemplate("<i class='k-icon k-i-heart'></i>")

)

Produces this on our page:

Telerik UI for ASP.NET Core Rating Component

Telerik UI for ASP.NET Core Rating Component Template

New ASP.NET Core Component Filter

You can use the new Filter component with any data bound controls to enable the building of complex filtering expressions in a visual and user-friendly way.

Using the following code:

@(Html.Kendo().Filter<Kendo.Mvc.Examples.Models.ProductViewModel>()

.Name("filter")

.MainLogic(FilterCompositionLogicalOperator.And)

.Fields(f =>

{

f.Add(p=>p.ProductName).Label("Product Name");

f.Add(p=>p.UnitsInStock).Label("Units In Stock");

})

.FilterExpression(f => {

f.Add(p => p.ProductName).StartsWith("Тea");

f.Add(p => p.UnitsInStock).IsGreaterThanOrEqualTo(100);

})

.DataSource("dataSource1")

)

Delivers the result shown below:

Telerik UI for ASP.NET Core Filter Component

New Document Processing Library

In R3 2019 we have added Telerik Document Processing as part of our offering. Telerik Document Processing for ASP.NET Core is a set of UI-independent and cross-platform libraries that enables processing content between different formats, PDF files generation, archive files management and will include the following libraries:

PDF Processing– built with performance and stability in mind, the document processing library enables your application to create, import and export files to and from PDF formats. The document model allows you to generate sleek documents with differently formatted text, images, shapes and more.
ZipLibrary - to load data from existing ZIP archives or create and edit ZIPs with data like images, docx or pdf files that can be used by other applications. You can also create ZIP archives in memory or use a stream to get data and add it to a ZIP archive.
SpreadStreamProcessing - create and export large amounts of data with excellent performance. You can also append data to already existing document stream. The generated document can be exported directly to a file on the file system or to a stream (for example, to send it to the client)
WordProcessing– manage and export documents to DOCX, RTF and plain text format without having to rely on third-party software (such as Microsoft Office). The rich text capabilities include tables, images, built-in styles and themes, various font types, sizes and colors.

New ASP.NET Core Component Card

In many of today’s applications content needs to be organized in a flexible way. That’s why we added The Card component in R3 2019. You have control over the configuration of card header, body and actions. To visualize the content in a more appealing way you can also accommodate images, lists, groups, separators and more.

Card components are perfect match for applications such as analytical dashboards, blogs, e-commerce and social platforms.

Telerik UI for ASP.NET Core Card Component

New ASP.NET Core Component Diagram

We have extended the suite of components for ASP.NET Core with one more member - the Diagram. The Diagramming control will enable you to create various types of interactive diagrams and flowcharts with a set of predefined shapes and the option to create custom ones.

Telerik UI for ASP.NET Core Diagram Component .

The Diagramming component also allows export to PDF and CRUD operations enabling users to easily manage data within your app.

Enhancing the Grid

In addition to the current grid filtering options, we implemented a built-in search panel so users can easily search through the data and filter only relevant records in the Grid. The search panel will add a search text box inside the grid toolbar and allow you to configure which grid fields will be searchable.

Telerik UI for ASP.NET Core Grid Search Panel

PDFViewer Enhancements

In R2 2019, we announced a new PDFViewer component that allows users to view and interact with PDF files without the need to download them locally. Based on your feedback, in the R3 2019 release we have applied some improvements and extended the component with zoom and scale functionality along with FitToWidth / FitToPage, search within the document, print functionality, plus panning and text selection.

Telerik UI for ASP.NET Core PDF Viewer

Telerik UI for ASP.NET Core PDFViewer Enhancements

Accessibility Improvements

As web accessibility is an important aspect of applications, we continuously work towards ensuring Telerik UI components are compliant to the technical standards implied by WAI-ARIA, WCAG 2.1, and Section 508. In R3 2019 we improved accessibility for the Grid, Editor, and MultiColumnComobBox components.

To find our more about the importance of Accessibility and how it affects your applications, check out our whitepaper that we published earlier this year.

Localization Enhancements

You are now able to localize the messages in the following components: AutoComplete, ComboBox, DropDownList, MultiSelect, MultiColumnComboBox. The localization to specific language can be set via the configuration options of the widget.

Setting Request Headers in Data Source Configuration

We have also added a Headers configuration option to enable you to easily set request headers in the data source.

Improvements on Documentation, Demos and Getting Started Experience

As requested by our community of developers, the Telerik UI for ASP.NET Core Team published its API Reference to enable further extension and customizations of the components when developing impactful applications.

Along with building of new components and features, we are also continuously investing in updating and improving the documentation and demos that support your development work. We have also added a series of videos related to Getting Started with Telerik UI for ASP.NET Core.

Try it Out and Learn More at the Webinar

Download the latest version of Telerik UI for ASP.NET Core, try it out and let us know what you think on our feedback portal. Be sure to sign up for the Telerik R3 2019 releasewebinar on October 2 for a deeper look at all the new features in the release.

RESERVE YOUR SEAT

Thank you for your continuous support and happy ASP.NET Core coding!

The R3 2019 for Telerik UI for ASP.NET AJAX is here! Discover more about the new kid on the block, including the RadDrawer control, the latest improvements in accessibility and enhancements to our existing components.

New Component: Drawer

The RadDrawer is the newest addition to the Telerik UI for ASP.NET AJAX component suite. It perfectly covers application scenarios where you need a sidebar for navigation, a sliding menu, or flexible panel in your responsive web applications. The RadDrawer can be opened either by clicking on a button or with a swiping gesture on specific content.

Telerik UI for ASP.NET AJAX Drawer Component

The RadDrawer provides client-side rendering and operating mode and exposes two behavior states:

Overlay, which takes the entire page height and creates an overlay over the page when opened
Push, which pushes the content to the left or right (depending on the drawer's position setting) and takes the remaining space

The component also provides configuration options for right and left positioning, support for gestures, and a special Mini mode.

Accessibility Improvements

In R3 2019, we continued working towards ensuring Telerik UI for ASP.NET AJAX web components conform to the technical standards implied by WAI-ARIA, WCAG 2.0, and Section 508. Our efforts were focused around improving the accessibility of the following components: ComboBox, Grid, DatePicker(s), TextBox, AutoCompleteBox and TabStrip.

Component Enhancements

Spreadsheet

The RadSpreadsheet component has been enhanced with the following features:

More than 20 new client-side events such as OnClientChanging, OnClientPaste, OnClientRemoveSheet, OnClientSelectSheet and many more
Support for importing/exporting cell indentation from/to an excel file
Spreadsheet Formulas now respect culture specific decimal separator
New Unhide row and Unhide column features in the context menu
Multiple other improvements and fixes that result in better stability

In addition to everything described from R3 2019 release, based on your feedback our team has also applied miscellaneous fixes and improvements on the Editor, Grid, ClientDataSource, ComboBox and DateTimePicker(s) components. For a complete reference of the release content please visit the Release History page.

Try it Out and Learn More at the Webinar

We would like to thank for the continuous support and encourage you to download the latest version of Telerik UI for ASP.NET AJAX. Once you try it out let us know what you think on our feedback portal. Be sure to sign up for the Telerik R3 2019 release webinar on October 2 for a deeper look at all the new features in the release.

RESERVE YOUR SEAT

I’m happy to announce that the latest R3 2019 release of Telerik UI for WPF and Telerik UI for Silverlight is now available online and it is loaded with tons of new components and features. It brings a few brand-new controls – SyntaxEditor, FilePathPicker, ToggleSwitchButton, new Visual Studio 2019 inspired theme as well as design time and toolbox support for the .Net Core version of the WPF suite.

Fasten your seat belts and let me guide you through this awesome R3 2019 release. ‍

Design Time and VS Toolbox Support for .Net Core

Later this month at .Net Conf 2019, Microsoft is expected to release the official version of .Net Core 3. On the WPF side of the new framework it is expected that full design time support for the WPF project will be added with the latest VS 2019. We have worked in close collaboration with Microsoft to make sure that the .Net Core version of Telerik UI for WPF supports all of the design time capabilities you can find in the full framework version, including toolbox support, working with the design canvas, smart tags support, properties windows and more, even before the official release of .Net Core 3.

We are also adding Visual Studio toolbox support for .Net Core 3 – when you refer our Nuget packages all the included controls there will show up in the toolbox. If you don’t know where to start and what packages to refer – you could add our single package that contains all the controls. This way you will be able to review and choose from the full variety of our controls. (For more info about our Nuget packages check this article)

For more info check out the .Net Core support section in our help docs.

SyntaxEditor (Beta)

The time has come! We are releasing RadSyntaxEditor– this is the new text editor control that is designed for displaying and editing code. It provides syntax highlighting and works with ease when huge files (with thousands of lines) need to be loaded and displayed. We have included built-in highlighting support for the most popular languages – C#, VB, JS, SQL, HTML, XML and of course XAML as well as support for creating custom language definitions and highlighting options.

Here are the key features of this initial release:

Syntax highlighting
Built-in support for C#, VB, JS, XML, XAML, HTML, SQL
Great editing experience
Code outlining
Code completion options
Overload lists
Undo and redo
Find and replace UI
Zooming
Line numbers
Different built-in palettes
Localization
Keyboard shortcuts
Great performance

I would like to hear from you about the features you want to see for the official version. So please give it a ride and share your feedback here or in our Feedback portal. Be sure to check out the WPF Demos of the control here and the full documentation here.

Happy coding with RadSyntaxEditor! ‍‍

New Visual Studio 2019 Theme

It is time for a new theme - meet the Visual Studio 2019 Theme! It is inspired by the latest version of Visual Studio as the name implies and delivers a cleaner and modern look and feel to WPF applications. Like our other our themes, we designed the theme to be highly customizable – by setting a single property of the Visual Studio 2019 palette you would be able to totally change the appearance of your app. For example, you can change with ease the opacity when disabled or main color of the controls!

Check how cool these controls look below:

And the BusyIndicator controlin action:

Pretty cool, huh? Make sure to play around with theme in the Color Theme Generator application and check out the documentation here. colorthemegenerator_vs2019

We are preparing a dedicated post about the new theme - so stay tuned!

WebCam (Official)

In case you missed it – in the previous release we introduced the beta version of RadWebCam. This component allows capturing photo and video from a webcam in a WPF application. Since then we polished the control and added few new features:

Support for recording audio with the video capturing.
New events identifying the start and the end of the video capture.
Many properties for customizing the displayed buttons and other elements of the UI of the controls.
A method that allows you to manually save/discard the snapshot that is currently in preview.
Added support for running the camera through Remote Desktop.

You can find the documentation of the control here and I hope you will enjoy it!

New FilePathPicker Component

Introducing the new FilePathPicker control – it allows users to easily select a file or a directory from the file system either by using the cool Telerik UI for WPF File Dialogs, or by directly typing the path in the entry. For a better user experience the control automatically displays the icon of the currently selected file. For more info please check this section of our online help documentation.

New ToggleSwitch Component

As you requested – we are adding a new ToggleSwitch button. This is a modern, lightweight, highly customizable toggle button that displays two exclusive choices for your users. The control supports three state mode as well (setting the value to null) and provides really cool animations for each of our themes.

For more details check out our documentation.

RichTextBox: Paste Options

RadRichTextBox now boasts support for a favorite feature to end users – Paste Options for text content. Formatting the copied content is no longer a difficult task. In accordance to one of the specific paste scenarios (paste within the same document; resolving conflicting styles, etc.), RadRichTextBox will pick the most suitable of the four built-in paste options to display the new content in the most appropriate way. Provided you prefer to change the default behavior from MS Word, it is easily customizable by enabling users to choose the available paste options and the default ones for every scenario. See it in action below:

RTB-PasteOptions

RichTextBox: .Net Core 3 Enhancements

Being excited about the desktop support in .NET Core 3, we decided to give RadRichTextBox a special boost, alongside the effort that we put on the whole suite. The release of .NET Core 3 provided us with the great opportunity to remodel RadRichTextBox’s start-up experience. Now the assemblies of RadRichTextBox are reorganized and merged in a single new one – Telerik.Windows.Controls.RichTextBox, which also prevents the need for using MEF for loading RadRichTextBox’s components. Alongside the framework improvements, this change nets you a significant performance boost at load time and it also ensures a smoother “getting started” experience.

VirtualizingWrapPanel: Added Grouping Support and Container Recycling

As some of you may already know we have a cool virtualizing wrap panel that you can use as ItemsPanel of RadListBox and other ItemControls. Today we are adding support for grouped scenarios and also container recycling that allows you to achieve even better performance. Note that the new features are only supported in the .Net 4.5 and .Net Core version of the controls.

In order to take advantage of the virtualization of the panel when grouping simply enable the attached VirtualizingPanel.IsVirtualizingWhenGrouping:

<telerik:RadListBoxItemsSource="{Binding CustomersView}"

DisplayMemberPath="Name"

VirtualizingPanel.IsVirtualizingWhenGrouping="True"

VirtualizingPanel.ScrollUnit="Pixel">

<telerik:RadListBox.ItemsPanel>

<ItemsPanelTemplate>

<telerik:VirtualizingWrapPanel />

</ItemsPanelTemplate>

</telerik:RadListBox.ItemsPanel>

</telerik:RadListBox>

And if you need container recycling you would simply need to set the attached VirtualizingPanel.VirtualizationMode to Recycling.

For more detail please refer to this help article.

Other Features

DesktopAlert: Added support for displaying alerts with auto height.
DesktopAlert: Added functionality to hide the alert from the Alt+Tab menu of the Windows. (link)
PivotGrid: Added culture support for QueryableDataProvider. (link)
PivotGrid: Added support for Week/Hour/Minute/Second steps of the QueryableDateTimeGroupDescription. (link)
VisualStudio2013 Theme: Added functionaliy to globally set the readonly opacity and background color where applicable (of the controls that have readonly state) using the Palette.ReadOnlyOpacity and ReadOnlyBackgroundColor properties. (link)
DataForm: Added EditorMode property to the DataFormDateField that determines the type of the created date control. (link)
NavigationView: Added template selectors for the Icon, Header and the Footer of the control. (link& link)
Map: Added mechanism to set properties to the webclient that is responsible for downloading the tiles. (link)
Diagrams: Now it is possible to change the default selection rectangle inflation value. (link)
PropertyGrid: Window location of the ModalEditor can be now specified through the API of the PropertyGrid. (link)
Menu: Added support for opening nested menu items in the VS designer.
VirtualGrid: Added ability to change text alignment of the cells as well as the header cells by using the CellDecorationsNeeded and HeaderCellDecorationsNeeded events. (link)
GridView: Added an option to export to xlsx/pdf without grouping. (link& link)

You can also check our Release History page for a complete list of the included improvements.

Sign Up for the Webinar

To see the new release in action, please join us on the Telerik R3 2019 webinar, on Wednesday, October 2, 2019 11:00 AM ET - 12:30 PM ET.

Save My Seat

Share Your Feedback

Feel free to drop us a comment below sharing your thoughts. Or visit our Feedback portals about UI for WPF, Silverlight and Document Processing Libraries and let us know if you have any suggestions or if you need any particular features/controls.

Try out the latest:

UI for WPF UI for Silverlight

In case you missed it, here are some of the updates from our last release.

The latest release of Telerik development tools brings the anticipated web-based Report Designer widget. It empowers you to bring report editing functionality to your end users right from your web applications. It also brings a lot of UX improvements compared to the classic Report Designer and its tooling.

Web-Based Report Designer Control

We realize just how important this tool is to providing a smooth experience to your end users. They often need to change predefined reports a bit, perhaps skewing the layout, changing a field formula or adding conditional formatting. And they prefer to accomplish this without leaving the comfort of the apps that you create for them to use, with care.

Now you can try the *preview* release of this designer, which we built from the ground-up with these scenarios in mind. We have to do quite a bit more to make it fully functional, on par with the desktop design tools, but we believe we are on the right track.

It has fine-graded drag-and-drop functionality to layout and re-parent all items and sections. It has a toolbox to add a new item instance of all supported types. It has a Report Explorer pane that gives a great view of the report structure, plus it now incorporates the Data Source components into it. And finally, you have a well thought out Properties pane that is much more user-friendly than the one from the Visual Studio IDE that we are all accustomed to. Once done with the necessary edits, you can examine the rendered report using the built-in report preview functionality. That said, this designer is already capable of basic edits made by the end users, which is one of their most common requirements.

Want to give it a try? Please, install Telerik Reporting R3 2019 and jump to the Visual Studio examples solution. Note that the designer’s backend requires.NET Core, so VS 2019 is the best choice here. Start the CSharp.AspNetCoreDemoapp and change the address to the page called webReportDesigner.html—that’s it!

Now give the designer a test run and most importantly, as it is a preview, send us your feedback! Simply leave a comment on this post or send us your thoughts in the dedicated feature request on our feedback portal. We are constantly listening to the Telerik community and using your feedback to further shape the designer. We realize how necessary all wizards and popup editors are, so these will get rethought and implemented, but any notes from you are our most valuable assets for the continuous improvement of the designer.

A NuGet package targeting both full .NET framework and .NET Core is available in order to facilitate the designer integration into your application. More info on this can be found in the documentation.

Oh, and if you are enjoying our Report Server, you can preview this new design option by first enabling it on the Configuration page, section Designer. This will show an additional toolbar button on the Reports page, which starts the edit for the currently selected report. The designer is tweaked so that you can not only Save, but Revert and Publish the report as well. Take a look and, you know, tell us what you think.

Flexible Parameters and Document Map Areas

As requested now, those two areas can be easily moved at the edges for all HTML5-based report viewers so that you can please your app designer. The feature is controlled through the viewers' APIs. No CSS or templates should be modified. And, yes, this flexibility is available for Report Server users. Navigate to the respective section in the Configuration page to change the default positioning.

Optimized Performance

We did not leave behind report generation machinery. Two changes that are worth noting here:

The first one concerns the different data visualizations that use the same data source definitions in the boundaries of the same report. Until now, each one of these pulled its copy of the raw data. Now, they will share one and the same instance of such data to save bandwidth and precious time to the end user. Surely, this applies to the Report Server report generation engine also.
The second one improves the scalability of the remote report generation engine. This is the engine responsible for the report rendering and caching behind the HTML5-based web report viewers, desktop viewers in remote mode and the live report preview of the Report Server. The cache invalidation and clearing got a significant rework so that the engine is more responsive and scalable.

For more information, please go check the full release notes for both Reporting and Report Server! Once you've done that, give it a try for yourself—and don't forget to have fun!

The new Xamarin.Forms Shell is meant to boost mobile developer productivity. App content organization and navigation is nicely abstracted away by the Shell, thus allowing developers more time to focus on app content. This article explores the basics of Xamarin.Forms Shell and how to get started.

Mobile app development should be fun. But the realities of enterprise app development often put mobile developers under tight timelines. Indie developers authoring mobile apps are often trying to squeeze the most out of nights and weekends. Any framework, tool or technique that gives mobile developers productivity boosts is thus very welcome.

Now, most foodies will agree - a good burrito is pure bliss. You get to pick a wrapper that suits your taste and what goes inside is whatever your heart desires. And yes, all burritos should be customizable. But, what does a food reference got anything to do with mobile development?

Mobile developers are often looking for shortcuts - a good starting point definitely is worth it. Wouldn't it be nice if we could get some boilerplate functionality out of the box and be able to focus on app functionality? Most apps follow some structure with content organization and navigation - wouldn't it be nice to get something beautiful out of the box that works cross-platform seamlessly? What app developers want is a burrito shell - and then be able to fill it up with app content.

Xamarin.Forms makes it incredibly easy for .NET developers to build apps for iOS, Android & much more. Xamarin.Forms allows for building truly native apps from a single shared code base - apps with beautiful native UI.

Xamarin.Forms 4.0 shipped earlier this year and it seriously upped the UI game with the introduction of the Shell. Much like how Xamarin.Forms abstracts away user interface elements into an easy to use API, Shell abstracts away app architecture and navigation complexity.

Shell provides a container for your app. That container includes a MasterDetailPage, a TabbedPage, and a NavigationPage or a combination thereof. Shell also provides a rudimentary search functionality. And, to top it off, it has URI based navigation baked right in. It's almost like the Shell is the tortilla of our app burrito and the pages are the delicious fillings! Now that we have driven the burrito metaphor to the ground, let's dive in and create a Shell-based Xamarin.Forms app!

Our Demo App

First off, here's the app we'll create today.

It's like a tourist guide to Seattle - except just a demo app. It has a MasterDetailPage with 2 children - one of which is a TabbedPage, the other is a regular old ContentPage. That TabbedPage has 2 tabs. Each page in those tabs has a ListView and tapping on the ListView items will navigate around the app. You can grab all of the demo code for this app on GitHub, clone it and follow along! Cool? Cool.

Shell Basics

To make an app into a Shell app, you need a Shell page. And that looks like this:

<?xml version="1.0" encoding="UTF-8"?>  
    <Shell
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:pages="clr-namespace:ShellDemo"  
        x:Class="ShellDemo.ShellPage">
    </Shell>

Then in your Application page's constructor:

public App()
{
    InitializeComponent();
    MainPage = new ShellPage();
}

Documentation for Xamarin.Forms Shell has a ton of in-depth info on bootstrapping a Shell application. Now let's make that shell contain something!

Shell Components

As mentioned, there are 3 main components of a Shell application - the MasterDetailPage (or flyout), the TabbedPage, and the NavigationPage. You can use these all together, or pick and choose as you see fit. Let's start with the MasterDetailPage.

The Flyout

Looking at the app above, there are two 'detail' pages for the MasterDetailPage. One is a TabbedPage and the other is a ContentPage. So let's look at how you would add that ContentPage:

<Shell>
    <FlyoutItem Title="Tourist Site of the Day">
        <pages:TouristSitePage Title="Tourist Site" />
    </FlyoutItem>
</Shell>

That's pretty straightforward. Within the <Shell> element, we put in a <FlyoutItem> element. And within that, a reference to your custom page.

Now let's take a minute to stop and look at some shortcuts when building up the Shell. There are other elements such as <ShellContent> that could go into this hierarchy. But the Xamarin.Forms team has made it so the XAML parser will put those in for you if you omit them. Xamarin.Forms already knows that <pages:TouristSitePage> should be within a <ShellContent>. So we can omit that and let Forms do the work. You can dive deep in the Flyout mechanics in the Docs or read up more on what else Forms does for you.

The Tabs

The next step is to add the TabbedPage. Or Tabs as Shell likes to call them. Since that's also a part of the MasterDetailPage, it will go into a FlyoutItem as well. And then to tell Xamarin.Forms to render that particular FlyoutItem as tabs, you put <Tab> elements in it.

The syntax looks like this:

<FlyoutItem Title="City Info">
    <Tab Title="City Info">
        <pages:CityInfoPage Title="City Info" />
    </Tab>
    <Tab>
        <pages:BusRoutePage Title="Bus Routes" />
    </Tab>
</FlyoutItem>

Now we're getting somewhere. A MasterDetailPage wrapping up a TabbedPage with two tabs and a regular ContentPage.

What if you don't want a MasterDetailPage at all? Leave out the FlyoutItem elements. Only put in <Tab> elements. And if you wanted, you could wrap all those <Tab> elements in a <TabBar> element too. And here's the best thing, by default, all the bottom-most pages are already inside a NavigationPage.

You know what that means, it's time to do some navigation!

Navigation

Shell gives us something called URI-based routing. That means you give a page a string identifier, then call Shell.Current.GoToAsync passing in that page's identifier. And .. you pass along arguments to the new page as query string parameters.

So in the case of the bus stop page: since it's not referenced anywhere in the <Shell> page's XAML, we need to define a route for it. We do that in the constructor of our Shell page:

public ShellPage()
{
    InitializeComponent();
    Routing.RegisterRoute("busstop", typeof(BusStopPage));
}

This is going to allow Shell to navigate to the BusStopPage. And we'll do that in the BusRoutePage's ListView.ItemSelected event:

async void Handle_ItemSelected(object sender, SelectedItemChangedEventArgs args)
{
    var selectedRoute = e.SelectedItem as BusRouteInfo;

    await Shell.Current.GoToAsync($"busstop=route{selectedRoute.RouteNumber}");
}

Shell then will new up the BusStopPage and navigate to it, passing in the bus route number of the selected item. How do you get at that passed in parameter? There's a class level attribute you can use. It specifies what the incoming parameter's name will be along with a property in the class it should populate.

So here's what that looks like:

[QueryProperty("RouteNumber", "route")]  
public partial class BusStopPage : ContentPage

The route parameter will populate the RouteNumber property. There's a lot more to navigation within the Shell. Docs are here to help.

Summing Up

There you have it - Xamarin.Forms Shell abstracting away some of the complexities of building apps into an intuitive API. The <Shell> element is the basis of it all. To that you add <FlyoutItem> to create a MasterDetailPage. Within those items, you add either <Tab> elements to create a TabbedPage or your custom pages. Within the <Tab> elements add your custom pages. And you can navigate all around using Shell's brand new URI-based navigation.

There's a whole lot more that Shell can do, including searching and a host of visual styling. As always, Docs are the best place to start - more Shell deep dive articles coming up here. And did you know that Telerik UI for Xamarin works seamlessly with the new Xamarin.Forms Shell? Good times indeed. Enjoy your burrito!

series_types We introduced the new WinForms Sparkline control in the Telerik UI for WinForms R3 2019 release. It is lightweight, compact and aims to present key information with excellent performance. Meet RadSparkline.

Sparkline Usage

The Sparkline control represents a highly compacted chart. It is super useful to highlight trends especially when screen space is limited. The control can easily display the variation of some measurement or stock price move.

Series Types

RadSparkline supports five different series types, each presenting the information in a meaningful yet compact manner. The series becomes really powerful when it is combined with the built-in indicators. Trends are highlighted in a user-friendly way and they can be perceived in a single glance.

Area

The data points are connected to form a line and an area enclosed by the points path and the zero line. area

Bar

This series is used to visualize data points as bar blocks where the height of each bar denotes the magnitude of its value. bar

Line

All of the data points are connected to form a line. line

Scatter

This series identifies the position of each data pointusing two numerical values along the horizontal and vertical axes. scatter

Win/Loss

All of the bars have an equal height and the view is divided into top and bottom halves. winloss

The Area, Bar and Win/Loss series define a BaselineValue property determining where exactly the viewport will be divided into top and bottom halves. By default, the view is split at the 0 value. The property is quite useful in the SparkWinLossSeries where one can define a value different than 0 to indicate wins and losses.

Consuming Data

It is super easy for the RadSparkline control to come to life. All you need to do is add data to it, whether you use data-binding or manually generated points, the API is straightforward both ways.

Data Binding

The control can be data-bound through the added series. Data-binding is implemented following the standard WinForms model with DataSource and ValueMember properties. The series can connect to any object which inherits from IList, IListSource (such as DataTable or DataSet), IBindingList (such as BindingList) or IBindingListView (such as BindingSource).

Unbound Mode

There is also an option to manually add data through the DataPoints property of the series.

SparkBarSeries barSeries = newSparkBarSeries();

barSeries.DataPoints.Add(newCategoricalSparkDataPoint(10));

// Or simply

barSeries.DataPoints.Add(10);

Indicators

RadSparkline exposes a convenient API to highlight significant data points. The indicators are a great way to bring user attention to a certain part of the trend such as highlighting high and low points, negative points or the first and the last points.

Switching indicators on or off is really easy as there are specific properties for each indicator. It is also possible to change and customize the colors, border widths and even the shape.

SparkLineSeries series = newSparkLineSeries();

series.ShowHighPointIndicator = true;

series.ShowLowPointIndicator = true;

series.HighPointBackColor = Color.DarkRed;

series.HighPointBorderWidth = 3;

series.HighPointBorderColor = Color.Yellow;

series.HighPointSize = newSizeF(20, 20);

series.LowPointShape = newStarShape(5, 5);

series.LowPointBackColor = Color.DarkGreen;

// Add data points

this.radSparkline1.Series = series;

sparkline-indicators002

Annotations

Besides the indicators, user attention can be also drawn to a particular area of the chart with spark annotations, the available ones are GridLine and PlotBand. With the former you can display lines at a certain location based on the axis values, while with the latter you can indicate an entire area – from the beginning to the end of the vertical or horizontal axis

Null Values

You can also define how null values added as data points will be handled by the control. In certain scenarios one may need to simply skip them and show an empty space on the view port while in other scenarios it would make sense to treat them as 0. This setting is controlled by the RadSparkLine.EmptyPointBehavior property.

Tooltips

Each of the data points can display a tooltip upon moving the mouse over. Tooltips are quite useful, and they will display the data point 's value. It is also possible to customize their text by handling the DataPointTooltipTextNeeded event on the tool tip controller.

Printing and Exporting

The control features convenient methods for exporting the sparkline control to an image or sending it to the printer.

this.radSparkline1.ExportToImage(@"..\..\spark.png", newSize(200, 200));

this.radSparkline1.PrintPreview();

Extensibility

As our controls are built on top of TPF it is really easy to use the main spark element in other controls. It is decoupled from the RadSparkline control which is basically a host of the RadSparklineElement. For example, you can add the element inside RadRibbonBar and have a cool chart which can be updated dynamically.

RadSparklineElement sparklineElement = newRadSparklineElement();

SparkBarSeries sparkBarSeries = newSparkBarSeries();

sparkBarSeries.ShowHighPointIndicator = true;

sparkBarSeries.ShowLowPointIndicator = true;

sparkBarSeries.ShowNegativePointIndicators = true;

sparkBarSeries.ShowFirstPointIndicator = true;

sparkBarSeries.ShowLastPointIndicator = true;

Random rand = newRandom();

for(inti = 0; i < 10; i++)

{

sparkBarSeries.DataPoints.Add(this.rand.Next(-100, 100));

}

sparklineElement.Series = sparkBarSeries;

this.radRibbonBarGroup1.Items.Add(sparklineElement);

spark_ribbon

Sparkline Grid Column

The RadSparklineElement is well integrated into RadGridView as part of the GridViewSparklineCellElement used by the GridViewSparklineColumn. In other words, RadGridView can now show chart data in a dedicated column. As the grid uses UI virtualization, having large amounts of data in the spark cells should not impact performance. The useful indicator related properties are exposed on the grid column and later propagated to the dynamically generated RadSparklineElement.

GridViewSparklineColumn sparkLineColumn = newGridViewSparklineColumn();

sparkLineColumn.SeriesType = SparkSeriesType.Line;

sparkLineColumn.Name = "Line";

sparkLineColumn.FieldName = "Line";

sparkLineColumn.HeaderText = "SparkLineColumn";

sparkLineColumn.ShowHighPointIndicator = true;

sparkLineColumn.ShowFirstPointIndicator = true;

sparkLineColumn.ShowLastPointIndicator = true;

sparkLineColumn.ShowNegativePointIndicators = true;

this.radGridView1.Columns.Add(sparkLineColumn);

grid_column

Data can be populated in the column as long as the grid is data bound to an object which has a property exposing an array of numbers pointing to the sparkline column. Another way is to handle the SparkDataNeeded event which gets raised whenever data needs to be synced to the cell. Of course, it is also possible to setup the grid in unbound mode and manually add the sparkline cell`s values.

Printing and Exporting in RadGridView

The sparkline column is also aware of the Document Processing Libraries, utilized by the grid exporting engine. The column is natively exported to Excel, PDF and HTML. The sparkline cells can be also printed. This is achieved using the element`s built-in export to image API.

sparkline_printing_exporting

Try it Out

To try out the new Telerik UI for WinForms Sparkline control, all you need to do is to download and install the latest bits. Existing users can get them in your accounts, and if you are new you can get a free 30 day trial here to check it out.

We'd love to hear how this all works for you, so please let us know your thoughts by visiting our Feedback portal or by leaving a comment below.

At .NET conf 2019, Microsoft announced that the Visual Studio App Center now provides support for WinForms and WPF applications. What the App Center provides is an environment to build your app, test it on real devices, distribute to users and instrument it with analytics.

After .Net conf, I tested this new feature in a Telerik UI for WinForms application that I am developing. At this point, I am amazed how easy it is to plug your application to the AppCenter and collect data.

Let me take you through the process of how to instrument your WinForms and WPF application with the AppCenter. The first step is to go to https://appcenter.ms/apps, log-in, and create a new app. Give it a name and select the appropriate type.

app_center_blog001

Once you have added the app, you will see the brief steps on your screen.

The steps are easy to follow. First install the Microsoft.AppCenter.Analytics and Microsoft.AppCenter.Crashes Nuget packages. It can take some time since the packages depend on other stuff as well.

Then you need to add the code to your application. Please note that the getting started page contains the actual key that you need to add in your app. There is just one line that you should add to the Program.cs file.

staticvoidMain()

{

AppCenter.Start("your code", typeof(Analytics), typeof(Crashes));

Application.EnableVisualStyles();

Application.SetCompatibleTextRenderingDefault(false);

Application.Run(newMainForm());

}

Once this is done, you can start tracking general information like sessions, user counts, user-related information like country and see some info about the used devices. At this point you can add some events to your application so you can track specific actions. You can add some data as parameter by using as Dictionary.

var data = newDictionary<string, string>();

data.Add("Rows", rows.Count.ToString());

data.Add("Columns", columns.Count.ToString());

Analytics.TrackEvent("Data Loaded", data);

After using your application for some time, you can see the data that is collected.

Here is the data shown on the main page.

And the custom event used in the application.

That is all you need to do to collect user data. I encourage you to try it since it's easy and can provide valuable info for your WinForms and WPF applications.

Check out the Telerik UI for WinForms and Telerik UI for WPF components suites to learn more on how to deliver high quality, feature rich, modern and engaging desktop applications with WinForms and WPF.

We had a great time during our long-awaited Adopting Blazor webinar last week. We had a great crowd, a lively discussion and tons of great questions. For those of you who could not attend, you can watch the webinar recording HERE for free. There is a lot of excitement in the air about Telerik UI for Blazor 2.1.1 with full support for the latest Blazor and .NET Core 3.0, along with new components and a number of significant improvements. Without further ado, let’s get to the heart of the matter and recap these great questions.

Will I be able to use this with SQL Server and calling stored procedures?
The business layer is independent from Blazor, so you can use whatever you need.

Where can Visual Basic .NET be used within Blazor?
There have been some questions around VB and Microsoft have shared their view on the topic in the following issue https://github.com/aspnet/Blazor/issues/171.

What pre-requisite knowledge is required to successfully program in Blazor for an experienced Windows / middle-tier/ database back-end programmer that has no prior web programming experience?
Prior knowledge in C# and MVC/Razor. Here are additional getting started resources on Blazor and Telerik UI for Blazor. Depending on your background, you can also refer to this Blazor guide by Microsoft.

In Blazor server-side, is it possible to make changes in Visual Studio, then reload the page to the website and take changes into account without stop and restart debugging?
It's still not in its final state, but in general yes.

What about file upload? :)
We have File Upload on our radar for implementation and will try to address it in 2020 releases. We will aim to publish regularly our updated plans on the Telerik UI for Blazor roadmap page.

In the GridView example, can the title be localized?
Localization is on our R1 2020 roadmap.

Is there any kind of designer available that would help add Telerik controls to a UI?
Based on user feedback we will consider the option for design tools available for Telerik Blazor controls.

Is support for OData/IQueryable in grid forthcoming?
The Telerik UI for Blazor Grid Supports IQueryable, and it's up to the developer what service the data comes from.

What about multiple components in detail?
Yes, you can put whatever you need inside the template.

Any information about when you'll release more components? Autocomplete is the one I need the most right now...
Our goal with Telerik UI for Blazor is to continuously deliver native UI components and ensure compatibility with preview versions beyond the official release of ASP.NET Core 3.0. We do have AutoComplete on our R1 2020 plan.

Are Telerik Blazor components available in Kendo UI and ASP.NET MVC licenses?
Telerik UI for Blazor is available as a single product or as part of our DevCraft bundles containing multiple JS and .NET frameworks. More information on the offering can be found here: https://www.telerik.com/purchase/blazor-ui

Is it possible to gradually integrate Blazor into a large ASP.NET web forms application?
No. But you should be able to do so with an ASP.NET Core application.

With a client-side Blazor app, what happens if the client isn't able to install the necessary runtime?
With client-side Blazor, you only need support on your browser.

Is it possible to port a SilverLight application to Blazor?
There isn't a direct way to do so, but depending on the app, you can create an equivalent Blazor app.

The server-side app is not a Single Page application, correct? It won't be SPA until client-side Blazor ships -- right?
It is a single page application, since only one-page request is sent. After the initial load, all other navigation and interaction with the site is done through a SignalR connection.

When did you add the Telerik dependency to the project? NuGet?
Yes, it's a single NuGet package, from our private NuGet feed. More details can be found in the Add the Telerik NuGet Feed to Visual Studio article.

It would be great if you could also show how remote data binding would work (say for binding data to Grid).
We will work on adding additional resources to cover that in our upcoming releases.

Is there/will there be a ComboBox control?
Yes, we do have ComboBox on our R1 2020 plan. To see the full list of available components you can visit the Telerik UI for Blazor page.

SilverLight promised the same thing. Write client code in compiled C#. MS was going to create plugins for common browsers, but they abandoned that idea. How do we know that won’t happen here?
Client-side Blazor uses wasm to run .net code on the client. It doesn't rely on any other plugins.

Have there been any known issues with different browsers and Blazor since no web browser implements the html standards exactly/properly?
With the supported browsers I believe not, at least not major ones. You can see the list supported browsers here.

Any timeline on other components like ComboBox, Scheduler, Gantt?
Yes, we do have the Scheduler and ComboBox on our R1 2020 plan. You can check out what else we have planned for R1 in our Roadmap. For the Gantt chart we do have it on our backlog and hopefully it will be addressed in some of the upcoming releases sooner rather than later.

How do you incorporate Blazor into an MVC Core web application? Is it automatically supported, or do you need to import dependencies?
There are several resources available on this topic. Checkout the article here.

Will Telerik UI work for Blazor when building an application in dual-mode (client/server)?
Telerik UI for Blazor components work in all hosting models. The differences are handled by the framework.

Is there a tutorial which we can refer to in the future to learn Blazor?
We have plans to publish more videos as well as enrich our Getting Started resources that can be found here: https://docs.telerik.com/blazor-ui/introduction. You can also check the official guide provided by Microsoft.

How do we get the Blazor Webassembly App template?
A detailed description can be found this article.

Are client-side Blazor apps sandboxed? i.e. can they access local resources like printers directly and not using the browser?
Yes, they are contained in the browser and don't have access to the server resources directly.

Is Blazor native friendly so we can use same code for desktop and native apps?
We recommend watching this demo by Steve Sanderson to see how far you can go with Blazor.

Is PWA possible also in server-side? With specific handle?
A key concept in PWA is offline support, which is not possible with server-side Blazor.

What is the scalability of your data grids?
They can be bound to IQueryable, so all paging, sorting and filtering is implemented through the database automatically. You also have the option to use your own service methods to get the best performance available. Check the following article: https://demos.telerik.com/blazor-ui/grid/manual-operations.

Why are there two Blazor hosting scenarios? What should your decision of server vs client be based on?
You can look at many articles on this question, as both models have their advantages. Check out this video for comparison on the different hosting scenarios.

Does the client need to install anything (like the way SilverLight was)?
No, you just need a browser support for wasm, if you are using client-side Blazor. For server-side you need Websockets support.

Do I remember you saying Blazor requires VS 2019 as a minimum?
Yes, you need the latest version of VS 2019. For full list of prerequisites to run a Blazor project, you can visit the Getting Started page on https://docs.telerik.com/blazor-ui/introduction.

How do Blazor and your components handle accessibility and screen reader usability?
Accessibility is going to be addressed in our upcoming 2020 releases.

Are there controls for displaying images and performing basic manipulations like zoom and rotate?
Currently we don’t have such a components, however we will consider it for our 2020 release plan.

Can we do some sort of foreign key-based OData api rendering? Meaning, if my grid is tied to OData to Products table and one of the fields is CategoryID which is a FK to Category table - are we able to tell Kendo UI that it’s a foreign key and use another OData url to get the name of this Category?
This would have to be resolved in the service layer. The grid itself is not able to resolve that at this moment.

Is there enough out-of-the box support for managing state across multiple routes & components?
No, but there are already some community packages that offer, for instance, LocalStorage. You can also use DI to inject any state service you need.

So, client-side Blazor only releases 1.0 version in .NET Core 5 release?
Client-side Blazor is expected to be released in May 2020. For details on .NET Core X evolution you can check the official plans of Microsoft in the their article.

If I added a /// <summary> to the CountBy parameter in my component, does that info appear in the intellisense info at the point of use?
Yes. That's how we annotate our Telerik component parameters.

What’s the likelihood that Microsoft will continue to grow and support Blazor? We got burnt with SilverLight so I’m keen not to repeat the same issue.
You may find some similarities. Blazor technology looks promising, Microsoft is heavily investing in it and what is different from SilverLight is that you don't need plugins. Blazor is natively supported by the browsers.

Is unit testing via mstest or selenium supported?
A great post on the topic by Steve Sanderson can be found here. In addition to that, we are happy to announce the Telerik Test Studio has support for Blazor and Telerik UI for Blazor components.

Are the attributes required to be strings e.g. "15" and not 15?
They are not.

Is client-side debugging available?
A great article on Debugger capabilities can be found here.

How do I install Telerik support for Blazor Project?
You can follow the instructions on our Getting Started documentation article.

One question I had is around StockMarket charts built on Blazor. We use AmCharts today as they are the best stock chart solution for us at the moment, but I would like the equivalent in a Blazor control. We are using older Telerik grids, and a Blazor solution would help there also.
The Telerik Blazor grid was the first component added to the suite and we are planning to continue its development and growth in the R1 2020 release. The StockMarket chart is in our backlog and hopefully will be addressed in an upcoming release sooner rather than later. You can check the demos and our Blazor sample application including grid and charts here.

When will you deliver the following controls for Blazor? ComboBox, ListBox, RadioButton, Check Box, Toggle Button, DropDown Button?
We have on our radar implementation for all of these components, some of them we are targeting with upcoming releases in 2020. We encourage you to submit any ideas and interests in our dedicated Blazor feedback portal.

Following the webinar, we have updated our official roadmap page where you can find What’s Coming Next in 2020. Keep this link bookmarked so you can always be informed what's in our plans: https://www.telerik.com/support/whats-new/blazor-ui/roadmap.

Can a client side Blazor app be hosted as a static web site?
Yes.

Do your Blazor components adapt to various screen sizes, i.e. PC and phones?
In general, yes, however mobile is more of a focus in our future plans.

Is there a path to migrate from SilverLight using Telerik components to Blazor?
It depends on your application, and its requirements. There isn't a 1 to 1 migration path between the two technologies.

I notice that <TelerikGrid attributes don't use quotes, but <GridColumn attributes DO include quotes. Different fundamental Razor object types or something like that?
They are not required in most places, but you can add them everywhere.

How easy is it to mix Blazor pages with existing Webforms/MVC apps?
You can only do so with Core 3.0 apps.

How well does Blazor and Telerik's Blazor Components work with real data and by that, I mean millions of records coming across. Since it auto handles the serialization does it know it needs to do virtualization or do you still have to code for those efficiencies?
They can be bound to IQueryable, so all paging, sorting and filtering is implemented through the database automatically. You also have the option to use your own service methods, to get the best performance available: https://demos.telerik.com/blazor-ui/grid/manual-operations.

That’s a Wrap!

What a great bunch of questions. We can’t thank you enough for your interest in Telerik UI for Blazor. We are super excited about this technology and the impact it will have on your productivity. Reach out to us through our feedback or support & sales team for any additional questions or thoughts.

What’s New in PdfViewer?

Commands Improvements

DoubleTappedCommand

Read-On-Demand Mode

What’s Coming to PdfViewer in the Official R3 2019 Release?

Tell Us What You Think

Navigating with the Keyboard

Navigating with a Screen Reader

Conclusion

Learn More about Accessibility

Adding Accessibility to Your Apps

New Blazor Components

New Blazor Component: Menu

New Blazor Component: TimePicker

Blazor Grid Enhancements

Grid Grouping

Grid Rows Selection

Preview 8 Compatibility

Let’s Meet at BASTA

Experience Telerik UI for Blazor 1.6.0

Share Your Feedback!

What is Accessibility Testing?

Why Perform Accessibility Testing?

Boost Visibility to a Greater Market

Lower Site Development and/or Maintenance Costs

Improve Usability on Different Browsers and/or Devices

Common Disabilities

1. Cognitive

2. Blindness

3. Vision Disabilities

4. Deafblindness

5. Physical Impairments

How to Do Accessibility Testing

1. Start Learning about Accessibility

2. Perform Manual Testing

3. Perform Automated Testing

Why Use Manual and Automated Testing?

Automated Accessibility Testing Tools

1. Dyno Mapper

2. SiteImprove

3. Monsido

Accessibility Testing Checklist

Conclusion

Learn More about Accessibility

Adding Accessibility to Your Apps

The Case for Accessibility

Mobility Impairments ✋ Case Study

Hearing Impairments Case Study

Visual Impairments ️ Case Study

Cognitive Disabilities Case Study

Conclusion

Learn More about Accessibility

Adding Accessibility to Your Apps

Sources:

New Controls

RadChat

RadMultiColumnComboBox

Control Improvements

Themes and Server-Side Events for MultiColumnComboBox

Built-in Confirm Dialog in Telerik Buttons

Toolbar for RadChat

GenerateXlsxOutput Method for RadGrid

Latest Internal Builds are Available Once Again

Knowledge Sharing and Public Resources

What to Look Forward to in R3 2019

Accessibility Is No Longer Something You Can Ignore

Pro Tips for Accessibility Beginners

1. Don’t Rely on the Lawyers’ Scans

2. Prepare for a Lot of Gray Area

3. Don’t Sacrifice Usability

4. Real People are the Best Judges

5. Be Aware of Common Problem Areas

Alternative Text

Color Contrast

Link Text

PDF Accessibility

6. Document Everything

7. Stay on Top of it

8. Train Your Maintenance Team

Build With Accessibility In Mind